class components to composite API

src/router/index.ts

@@ -7,7 +7,7 @@ const routes: Array<RouteRecordRaw> = [
         name: 'Login',
         component: () => import('../views/Login/Login.vue'),
     },
-    /*  {
+    {
         path: '/',
         name: 'Main',
         component: () => import('../views/Layout/Main.vue'),
@@ -29,7 +29,7 @@ const routes: Array<RouteRecordRaw> = [
                 component: () => import('../views/Layout/NotFound.vue'),
             },
         ],
-    }, */
+    },
 ];
 
 const router = createRouter({

src/views/Customer/Customer.vue

@@ -4,11 +4,4 @@
     </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class Customer extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>

src/views/Dashboard/Dashboard.vue

@@ -4,11 +4,4 @@
     </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class Dashboard extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>

src/views/Layout/Main.vue

@@ -59,22 +59,14 @@
     </q-layout>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import Topbar from '@/components/Topbar.vue';
+const drawer = ref(false);
+const miniState = ref(true);
 
-@Options({
-    components: {
-        Topbar,
-    },
-})
-export default class Main extends Vue {
-    drawer = false;
-    miniState = true;
-
-    onToggleDrawer(): void {
-        this.drawer = !this.drawer;
-    }
+function onToggleDrawer(): void {
+    drawer.value = !drawer.value;
 }
 </script>
 

src/views/Layout/NotFound.vue

@@ -2,11 +2,4 @@
     <q-page> Page not found </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class NotFound extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>

src/views/Login/Login.vue

@@ -62,12 +62,6 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 
-interface LoginForm {
-    username: string;
-    password: string;
-    keepLogin: boolean;
-}
-
 const quasar = useQuasar();
 const store = useStore();
 const router = useRouter();
@@ -89,8 +83,8 @@ const darkMode = computed({
 function onSubmit(): void {
     axios
         .post('/api/accounts/login', {
-            user: username,
-            password: password,
+            user: username.value,
+            password: password.value,
         })
         .then((response) => {
             store.dispatch('logIn', {
@@ -120,23 +114,6 @@ function onSubmit(): void {
             }
         });
 }
-
-/*     data(): LoginForm {
-        return {
-            username: '',
-            password: '',
-            keepLogin: true,
-        };
-    } */
-
-/* @Options({
-    setup() {
-        return {
-            $q: useQuasar(),
-        };
-    },
-})
- */
 </script>
 
 <style lang="scss" scoped>