vue3

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "arrowParens": "always",
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none"
+}

package.json

@@ -13,19 +13,20 @@
     "express": "^4.17.1",
     "highcharts": "^7.1.2",
     "mongodb": "^3.2.7",
-    "vue": "^2.6.10",
+    "vue": "^3.0.0",
-    "vue-router": "^3.0.3",
+    "vue-router": "^4.0.0-beta.10",
-    "vuex": "^3.0.1"
+    "vuex": "^4.0.0-beta.4"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-babel": "^4.5.4",
-    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^4.5.4",
-    "@vue/cli-service": "^3.8.0",
+    "@vue/cli-service": "^4.5.4",
+    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.1.0",
     "bulma": "^0.7.5",
     "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "eslint-plugin-vue": "^7.0.0-beta.3",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.6.10"
@@ -36,7 +37,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "@vue/standard"
     ],
     "rules": {

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
-    <NavBar :activeType="type" @setType="setType"></NavBar>
+    <NavBar :activeType="type" @set-type="setType"></NavBar>
     <section class="section">
-      <TimeWindows :activeWindow="window" @setWindow="setWindow"></TimeWindows>
+      <TimeWindows :activeWindow="window" @set-window="setWindow"></TimeWindows>
       <Chart :window="window" :type="type"></Chart>
     </section>
   </div>
@@ -39,13 +39,15 @@ export default {
     },
     updateRoute() {
       if (this.type) {
-        this.$router.push({
+        const route = {
           name: 'view',
           params: {
             type: this.type,
             window: this.window.label ? this.window.label.replace(' ', '-') : undefined
           }
-        })
+        }
+        console.log(route)
+        this.$router.push(route)
       }
     }
   }

src/components/Chart.vue

@@ -28,6 +28,7 @@ export default {
   },
   methods: {
     async fetchData() {
+      console.log('fetch data')
       if (this.window.label) {
         this.loading = true
         const typeApi = {

src/components/NavBar.vue

@@ -46,7 +46,7 @@ export default {
   },
   mounted() {
     if (!this.activeType) {
-      this.$emit('setType', this.navTypes[0])
+      this.$emit('set-type', this.navTypes[0])
     }
   },
   methods: {
@@ -58,7 +58,7 @@ export default {
     },
     setType(type) {
       this.toggled = false
-      this.$emit('setType', type)
+      this.$emit('set-type', type)
     }
   }
 }

src/components/TimeWindows.vue

@@ -4,7 +4,7 @@
       <li
         v-for="window in windows"
         :key="window.label"
-        @click="$emit('setWindow', window)"
+        @click="$emit('set-window', window)"
         :class="{'is-active': window.label === activeWindow.label}"
       >
         <a>{{window.label}}</a>
@@ -68,11 +68,12 @@ export default {
     }
   },
   mounted() {
+    console.log('mounted')
     if (typeof this.activeWindow === 'string') {
       const window = this.windows.find(w => w.label === this.activeWindow.replace('-', ' '))
-      this.$emit('setWindow', window)
+      this.$emit('set-window', window)
     } else if (!this.activeWindow.label) {
-      this.$emit('setWindow', this.windows[1])
+      this.$emit('set-window', this.windows[1])
     }
   }
 }

src/main.js

@@ -1,13 +1,8 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from '@/App'
 import router from '@/router'
-import store from '@/store'
 import '@/style/style.scss'
 
-Vue.config.productionTip = false
+const app = createApp(App)
-
+app.use(router)
-new Vue({
+app.mount('body')
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')

src/router.js

@@ -1,15 +1,13 @@
-import Vue from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
-import Router from 'vue-router'
+import App from '@/App'
-
+export default createRouter({
-Vue.use(Router)
+  history: createWebHistory(),
-
-export default new Router({
-  mode: 'history',
   base: process.env.BASE_URL,
   routes: [
     {
       path: '/:type/:window?',
-      name: 'view'
+      name: 'view',
+      component: App
     }
   ]
 })

src/store.js

@@ -1,7 +1,4 @@
-import Vue from 'vue'
+import { createStore } from 'vuex'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {