upgrade to Vue 3.4.3

src/components/Chart.vue

@@ -10,8 +10,7 @@ import * as Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
-import type { Window } from '@/utils/types'
-import type { navType } from '@/utils/types'
+import type { Window, NavType } from '@/utils/types'
 import { typeApi } from '@/utils/types'
 import { useFetch } from '@vueuse/core'
 
@@ -23,7 +22,7 @@ Highcharts.setOptions({
 
 const props = defineProps<{
   activeWindow: Window
-  activeType: navType | null
+  activeType: NavType | undefined
 }>()
 
 const chart = ref<HTMLElement | null>(null)

src/components/Main.vue

@@ -1,31 +1,30 @@
 <template>
   <div id="app">
-    <NavBar :activeType="activeType" @set-type="setType"></NavBar>
+    <NavBar v-model="activeType"></NavBar>
     <section class="section">
-      <TimeWindows :windows="windows" :active-window="activeWindow" @set-window="setWindow"></TimeWindows>
+      <TimeWindows :windows="windows" v-model="activeWindow"></TimeWindows>
       <Chart :active-window="activeWindow" :active-type="activeType"></Chart>
     </section>
     <router-view></router-view>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import NavBar from '@/components/NavBar.vue'
 import TimeWindows from '@/components/TimeWindows.vue'
 import Chart from '@/components/Chart.vue'
 import { windows } from '@/utils/helpers'
-import type { Window } from '@/utils/types'
-import type { navType } from '@/utils/types'
+import type { Window, NavType } from '@/utils/types'
 
 const defaultWindow = windows[1]
 
-const activeType = ref<navType | null>(null)
+const activeType = ref<NavType>()
 const activeWindow = ref<Window>(defaultWindow)
 
 const router = useRouter()
 const route = useRoute()
-if (route.params.type) activeType.value = route.params.type as navType
+if (route.params.type) activeType.value = route.params.type as NavType
 if (route.params.window) {
   activeWindow.value = windows.find((w) => w.label === route.params.window) || defaultWindow
 }
@@ -43,14 +42,7 @@ const updateRoute = () => {
   }
 }
 
-const setType = (newType: navType) => {
-  activeType.value = newType
-  updateRoute()
-}
-const setWindow = (newWindow: Window) => {
-  activeWindow.value = newWindow
-  updateRoute()
-}
+watch([activeWindow, activeType], () => updateRoute())
 </script>
 <style scoped>
 #app {

src/components/NavBar.vue

@@ -34,24 +34,18 @@
 <script setup lang="ts">
 import { capitalizeFirstLetter } from '@/utils/helpers'
 import { ref } from 'vue'
-import type { navType } from '@/utils/types'
+import type { NavType } from '@/utils/types'
 
-const props = defineProps<{
-  activeType: navType | null
-}>()
+const activeType = defineModel<NavType>()
 
-const emit = defineEmits<{
-  'set-type': [type: navType]
-}>()
-
-const setType = (type: navType) => {
+const setType = (type: NavType) => {
   toggled.value = false
-  emit('set-type', type)
+  activeType.value = type
 }
 
 const toggled = ref(false)
-const navTypes: navType[] = ['temperatuur', 'luchtvochtigheid']
-if (!props.activeType) setType(navTypes[0])
+const navTypes: NavType[] = ['temperatuur', 'luchtvochtigheid']
+if (!activeType.value) setType(navTypes[0])
 const toggleMenu = () => (toggled.value = !toggled.value)
 </script>
 <style scoped lang="scss">

src/components/TimeWindows.vue

@@ -4,7 +4,7 @@
       <li
         v-for="window in props.windows"
         :key="window.label"
-        @click="emit('set-window', window)"
+        @click="activeWindow = window"
         :class="{ 'is-active': window.label === activeWindow?.label }"
       >
         <a>{{ window.label }}</a>
@@ -16,11 +16,8 @@
 import type { Window } from '@/utils/types'
 
 const props = defineProps<{
-  activeWindow: Window
   windows: Window[]
 }>()
 
-const emit = defineEmits<{
-  'set-window': [window: Window]
-}>()
+const activeWindow = defineModel<Window>({ required: true })
 </script>

src/utils/types.ts

@@ -11,4 +11,4 @@ export const typeApi = {
   luchtvochtigheid: 'humidity'
 }
 
-export type navType = keyof typeof typeApi
+export type NavType = keyof typeof typeApi