fix

src/App.vue

@@ -1,3 +1,53 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRouter, useRoute } from 'vue-router'
+import KuFooter from './components/KuFooter.vue'
+
+const store = useStore()
+const router = useRouter()
+const route = useRoute()
+
+const adsenseContent = ref('')
+
+const theme = computed(() => store.getters['theme/getTheme'])
+const isAuthenticated = computed(() => store.getters['auth/getIsAuthenticated'])
+
+watch(theme, (newTheme) => {
+  newTheme === 'light'
+    ? document.querySelector('html').classList.remove('dark')
+    : document.querySelector('html').classList.add('dark')
+})
+
+watch(isAuthenticated, (newValue) => {
+  if (newValue) {
+    router.push('/schedule')
+  } else {
+    router.push('/login')
+  }
+})
+
+// Mounted lifecycle hook
+onMounted(() => {
+  adsenseContent.value = document.getElementById('divadsensedisplaynone').innerHTML
+  initTheme()
+})
+
+// Methods
+const initTheme = () => store.dispatch('theme/initTheme')
+const toggleTheme = () => store.dispatch('theme/toggleTheme')
+
+const navigateToLogin = () => {
+  if (route.path !== '/login') {
+    router.push('/login')
+  }
+}
+
+const logout = () => {
+  store.commit('auth')
+}
+</script>
+
 <template>
   <div
     id="app"
@@ -67,63 +117,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import { mapGetters, mapActions, mapMutations } from 'vuex'
-import KuFooter from '@/components/KuFooter.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    KuFooter,
-  },
-  data() {
-    return {
-      adsenseContent: '',
-    }
-  },
-  computed: {
-    ...mapGetters({
-      theme: 'theme/getTheme',
-    }),
-    ...mapGetters({
-      isAuthenticated: 'auth/getIsAuthenticated',
-    }),
-  },
-  watch: {
-    theme(newTheme) {
-      newTheme === 'light'
-        ? document.querySelector('html').classList.remove('dark')
-        : document.querySelector('html').classList.add('dark')
-    },
-    isAuthenticated(newValue) {
-      if (newValue) {
-        this.$router.push('/schedule')
-      } else {
-        this.$router.push('/login')
-      }
-    },
-  },
-  mounted() {
-    this.adsenseContent = document.getElementById('divadsensedisplaynone').innerHTML
-    this.initTheme()
-  },
-  methods: {
-    ...mapActions('theme', ['initTheme', 'toggleTheme']),
-    ...mapMutations('auth', ['clearAuthData']),
-    navigateToLogin() {
-      if (this.$route.path !== '/login') {
-        this.$router.push('/login')
-      }
-    },
-    logout() {
-      this.clearAuthData()
-    },
-  },
-})
-</script>
-
 <style>
 #app {
   display: flex;

tsconfig.json

@@ -11,7 +11,9 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": ["vite/client", "node"]
+    "types": ["vite/client", "node"],
+    "jsx": "preserve",
+    "jsxImportSource": "vue"
   },
   "include": ["./src/**/*", "vite.config.ks"],
   "exclude": ["node_modules", "dist", "public", "scripts"]