vue3

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
-
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('body')

src/router.js

@@ -1,15 +1,13 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-export default new Router({
-  mode: 'history',
+import { createRouter, createWebHistory } from 'vue-router'
+import App from '@/App'
+export default createRouter({
+  history: createWebHistory(),
   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 Vuex from 'vuex'
-
-Vue.use(Vuex)
+import { createStore } from 'vuex'
 
 export default new Vuex.Store({
   state: {