Upgrade to Vue 3

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 MichaelCurrin
+Copyright (c) 2020 - 2021 MichaelCurrin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -24,9 +24,9 @@ This project was generated using the GUI invoked by this command:
 $ npx @vue/cli ui
 ```
 
-The _router_ option was enabled there to set up the Home and About pages.
+The _router_ option was enabled there to set up the Home and About pages - _Project plugins_ then _Add vue-router_.
 
-You can also use this to add Vue ROuter to an existing project.
+You can also use this to add Vue Router to an existing project.
 
 ```sh
 $ vue add router
@@ -107,6 +107,11 @@ View the output in the unversioned `dist` directory.
 $ yarn lint
 ```
 
+Add Prettier support:
+
+- Install `prettier`
+- Add `@vue/prettier` to `eslintConfig` `extends` in `package.json`.
+
 ### Customize configuration
 
 See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -13,31 +13,27 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11",
-    "vue-router": "^3.4.7"
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.8",
-    "@vue/cli-plugin-eslint": "^4.5.8",
-    "@vue/cli-plugin-router": "^4.5.8",
-    "@vue/cli-service": "^4.5.8",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-vue": "^7.0.0"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended",
-      "@vue/prettier"
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
     ],
     "parserOptions": {
       "parser": "babel-eslint"

src/App.vue

@@ -1,11 +1,9 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
   </div>
+  <router-view />
 </template>
 
 <style>

src/main.js

@@ -1,10 +1,5 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
 
-Vue.config.productionTip = false;
-
-new Vue({
-  router,
-  render: h => h(App)
-}).$mount("#app");
+createApp(App).use(router).mount('#app')

src/router/index.js

@@ -1,28 +1,25 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
-
-Vue.use(VueRouter);
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Home from '../views/Home.vue'
 
 const routes = [
   {
-    path: "/",
-    name: "Home",
+    path: '/',
+    name: 'Home',
     component: Home
   },
   {
-    path: "/about",
-    name: "About",
+    path: '/about',
+    name: 'About',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   }
-];
+]
 
-const router = new VueRouter({
+const router = createRouter({
+  history: createWebHashHistory(),
   routes
-});
+})
 
-export default router;
+export default router