Update to vue3

app/.eslintrc.js

@@ -3,7 +3,11 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  extends: [
+    "plugin:vue/vue3-recommended",
+    "eslint:recommended",
+    "@vue/prettier"
+  ],
   parserOptions: {
     ecmaVersion: 2020
   },

app/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: "false",
+        useBuiltIns: "usage",
+        targets: "> 0.25%, not dead"
+      }
+    ]
+  ],
+  env: {
+    test: {
+      presets: [["@babel/preset-env", { targets: { node: "current" } }]]
+    }
+  }
+};

app/jest.config.js

@@ -3,5 +3,8 @@ module.exports = {
   moduleNameMapper: {
     "^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
       "jest-transform-stub"
+  },
+  transform: {
+    "^.+\\.vue$": "vue-jest"
   }
 };

app/package.json

@@ -4,31 +4,35 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "local-build": "vue-cli-service build --mode=local",
-    "prod-build": "vue-cli-service build --mode-production",
     "test:unit": "vue-cli-service test:unit --u",
-    "lint": "vue-cli-service lint --fix"
+    "lint": "vue-cli-service lint --fix",
+    "local-build": "vue-cli-service build --mode=local",
+    "prod-build": "vue-cli-service build --mode-production"
   },
   "dependencies": {
+    "@vue/compat": "^3.1.5",
     "axios": "^0.21.1",
     "highlight.js": "^10.4.1",
     "marked": "^1.1.1",
     "sea.css": "^2.1.0",
-    "vue": "^2.6.11",
-    "vue-multiselect": "^2.1.6",
-    "vue-router": "^3.2.0"
+    "vue": "^3.1.5",
+    "vue-multiselect": "^3.0.0-alpha.2",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-plugin-router": "~4.4.0",
-    "@vue/cli-plugin-unit-jest": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-router": "~4.5.15",
+    "@vue/cli-plugin-unit-jest": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.0.3",
+    "@vue/test-utils": "^2.0.0-rc.18",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.20.0",
     "prettier": "^1.19.1",
-    "vue-template-compiler": "^2.6.11"
+    "vue-jest": "^5.0.0-alpha.10"
   }
 }

app/src/App.vue

@@ -7,13 +7,15 @@
 </template>
 
 <script>
+import { defineComponent } from "vue";
 import Navigation from "./components/Navigation";
 import Footer from "./components/Footer";
-export default {
+
+export default defineComponent({
   name: "App",
   components: {
     Navigation,
     Footer
   }
-};
+});
 </script>

app/src/components/Error.vue

@@ -1,17 +1,23 @@
 <template>
   <div
-    class="alert alert-danger margin-bottom-2rem color-text-reverse"
     v-if="error"
+    class="alert alert-danger margin-bottom-2rem color-text-reverse"
   >
     <p>{{ error }}</p>
   </div>
 </template>
 
 <script>
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "Error",
   props: {
-    error: String
+    error: {
+      type: String,
+      required: false,
+      default: ""
+    }
   }
-};
+});
 </script>

app/src/components/Footer.vue

@@ -11,7 +11,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "Footer"
-};
+});
 </script>

app/src/components/Loader.vue

@@ -5,9 +5,11 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "Loader"
-};
+});
 </script>
 
 <style scoped>

app/src/components/Navigation.vue

@@ -6,7 +6,7 @@
           <div class="nav-left">
             <a class="nav-link-logo"><b>gobel-admin-client-example</b></a>
           </div>
-          <div class="nav-right" v-if="isActive">
+          <div v-if="isActive" class="nav-right">
             <router-link class="nav-link" to="/">Home</router-link>
             <router-link class="nav-link" to="/posts">Posts</router-link>
             <router-link class="nav-link" to="/categories"
@@ -27,11 +27,11 @@
               >gobel-admin-client-example</a
             >
           </div>
-          <div class="nav-right" v-if="isActive">
+          <div v-if="isActive" class="nav-right">
             <div id="nav-sp-drawer">
               <input id="nav-sp-input" type="checkbox" class="sp-hidden" />
               <label id="nav-sp-open" for="nav-sp-input"><span></span></label>
-              <label class="sp-hidden" id="nav-sp-close" for="nav-sp-input"
+              <label id="nav-sp-close" class="sp-hidden" for="nav-sp-input"
                 ><span></span
               ></label>
               <div id="nav-sp-content">
@@ -58,10 +58,12 @@
 </template>
 
 <script>
+import { defineComponent } from "vue";
 import apiClient from "../modules/apiClient";
 import router from "../router";
 import storage from "../storage";
-export default {
+
+export default defineComponent({
   name: "Navigation",
   computed: {
     isActive() {
@@ -92,5 +94,5 @@ export default {
       }
     }
   }
-};
+});
 </script>

app/src/components/Pagination.vue

@@ -13,30 +13,37 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "Pagination",
   props: {
-    name: String,
+    name: {
+      type: String,
+      required: true
+    },
     page: {
-      default: 1,
-      type: Number
+      type: Number,
+      required: true,
+      default: 1
     },
     limit: {
-      default: 10,
-      type: Number
+      type: Number,
+      required: true,
+      default: 10
     },
     pagecount: {
-      default: 10,
-      type: Number
-    },
-    refresh: Function
+      type: Number,
+      required: true,
+      default: 10
+    }
   },
   methods: {
     isCurrent(i) {
       return i == this.page;
     }
   }
-};
+});
 </script>
 
 <style scoped>

app/src/main.js

@@ -1,13 +1,9 @@
-import Vue from "vue";
+import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import "sea.css/dist/sea.min.css";
 
-Vue.config.productionTip = false;
+const app = createApp(App);
 
-new Vue({
-  router,
-  render: function(h) {
-    return h(App);
-  }
-}).$mount("#app");
+app.use(router);
+app.mount("#app");

app/src/pages/Categories.vue

@@ -31,8 +31,8 @@
               </td>
               <td>
                 <a
-                  @click.prevent.stop="deleteCategories(category.id)"
                   class="color-danger delete-link"
+                  @click.prevent.stop="deleteCategories(category.id)"
                   >Delete</a
                 >
               </td>
@@ -48,7 +48,7 @@
           :page="page"
           :limit="limit"
           :pagecount="pagecount"
-          @click.native="getCategories(page, limit)"
+          @click="getCategories(page, limit)"
         />
       </div>
     </div>
@@ -60,16 +60,24 @@ const defaultPage = 1;
 const defaultLimit = 10;
 const defaultPageCount = 10;
 
+import { defineComponent } from "vue";
 import Loader from "@/components/Loader.vue";
 import Pagination from "@/components/Pagination.vue";
 import apiClient from "../modules/apiClient";
 import storage from "../storage";
-export default {
+
+export default defineComponent({
   name: "Categories",
   components: {
     Loader,
     Pagination
   },
+  beforeRouteUpdate(to, from, next) {
+    this.page = to.query.page;
+    this.limit = to.query.limit;
+    this.getCategories(this.page, this.limit);
+    next();
+  },
   data() {
     return {
       loading: false,
@@ -88,12 +96,6 @@ export default {
       this.getCategories(page, limit);
     }
   },
-  beforeRouteUpdate(to, from, next) {
-    this.page = to.query.page;
-    this.limit = to.query.limit;
-    this.getCategories(this.page, this.limit);
-    next();
-  },
   methods: {
     async getCategories(page, limit) {
       try {
@@ -141,7 +143,7 @@ export default {
       }
     }
   }
-};
+});
 </script>
 
 <style scoped>

app/src/pages/Comments.vue

@@ -44,7 +44,7 @@
           :page="page"
           :limit="limit"
           :pagecount="pagecount"
-          @click.native="getComments(page, limit)"
+          @click="getComments(page, limit)"
         />
       </div>
     </div>
@@ -56,15 +56,23 @@ const defaultPage = 1;
 const defaultLimit = 10;
 const defaultPageCount = 10;
 
+import { defineComponent } from "vue";
 import Loader from "@/components/Loader.vue";
 import Pagination from "@/components/Pagination.vue";
 import apiClient from "../modules/apiClient";
-export default {
+
+export default defineComponent({
   name: "Comments",
   components: {
     Loader,
     Pagination
   },
+  beforeRouteUpdate(to, from, next) {
+    this.page = to.query.page;
+    this.limit = to.query.limit;
+    this.getComments(this.page, this.limit);
+    next();
+  },
   data() {
     return {
       loading: false,
@@ -83,12 +91,6 @@ export default {
       this.getComments(page, limit);
     }
   },
-  beforeRouteUpdate(to, from, next) {
-    this.page = to.query.page;
-    this.limit = to.query.limit;
-    this.getComments(this.page, this.limit);
-    next();
-  },
   methods: {
     async getComments(page, limit) {
       try {
@@ -113,7 +115,7 @@ export default {
       }
     }
   }
-};
+});
 </script>
 
 <style scoped>