Updated to composition API

package-lock.json

@@ -13,7 +13,6 @@
                 "core-js": "^3.6.5",
                 "quasar": "^2.0.0",
                 "vue": "^3.0.0",
-                "vue-class-component": "^8.0.0-0",
                 "vue-i18n": "^9.1.0",
                 "vue-router": "^4.0.0-0",
                 "vuex": "^4.0.0-0"
@@ -19418,14 +19417,6 @@
                 "@vue/shared": "3.2.31"
             }
         },
-        "node_modules/vue-class-component": {
-            "version": "8.0.0-rc.1",
-            "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
-            "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
-            "peerDependencies": {
-                "vue": "^3.0.0"
-            }
-        },
         "node_modules/vue-cli-plugin-i18n": {
             "version": "2.3.1",
             "resolved": "https://registry.npmmirror.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-2.3.1.tgz",
@@ -37109,12 +37100,6 @@
                 "@vue/shared": "3.2.31"
             }
         },
-        "vue-class-component": {
-            "version": "8.0.0-rc.1",
-            "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
-            "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
-            "requires": {}
-        },
         "vue-cli-plugin-i18n": {
             "version": "2.3.1",
             "resolved": "https://registry.npmmirror.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-2.3.1.tgz",

package.json

@@ -16,7 +16,6 @@
         "core-js": "^3.6.5",
         "quasar": "^2.0.0",
         "vue": "^3.0.0",
-        "vue-class-component": "^8.0.0-0",
         "vue-i18n": "^9.1.0",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.0-0"

src/App.vue

@@ -2,12 +2,6 @@
     <router-view></router-view>
 </template>
 
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-
-export default class App extends Vue {}
-</script>
-
 <style lang="scss">
 .body--light {
     background-color: #ccc;

src/i18n.ts

@@ -20,7 +20,7 @@ function loadLocaleMessages(): LocaleMessages<VueMessageType> {
 }
 
 export default createI18n({
-    legacy: true,
+    legacy: false, // Disabled for composition API usage
     locale: process.env.VUE_APP_I18N_LOCALE || 'en',
     fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
     messages: loadLocaleMessages(),

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/Login/Login.vue

@@ -4,14 +4,14 @@
             <q-toolbar>
                 <q-space></q-space>
                 <q-toggle
-                    :label="$t(`globals.lang['${language}']`)"
+                    :label="t(`globals.lang['${locale}']`)"
                     icon="public"
                     color="orange"
                     false-value="es"
                     true-value="en"
-                    v-model="language"
+                    v-model="locale"
                 />
-                <q-toggle v-model="mode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
+                <q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
             </q-toolbar>
         </q-header>
         <q-page-container>
@@ -24,7 +24,7 @@
                                 filled
                                 color="orange"
                                 v-model="username"
-                                :label="$t('login.username')"
+                                :label="t('login.username')"
                                 lazy-rules
                                 :rules="[
                                     (val: string) => (val && val.length > 0) || 'Please type something',
@@ -35,16 +35,16 @@
                                 color="orange"
                                 type="password"
                                 v-model="password"
-                                :label="$t('login.password')"
+                                :label="t('login.password')"
                                 lazy-rules
                                 :rules="[
                                     (val: string) => (val && val.length > 0) || 'Please type something',
                                 ]"
                             />
-                            <q-toggle v-model="keepLogin" :label="$t('login.keepLogin')" color="orange" />
+                            <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
 
                             <div>
-                                <q-btn :label="$t('login.submit')" type="submit" color="orange" />
+                                <q-btn :label="t('login.submit')" type="submit" color="orange" />
                             </div>
                         </q-form>
                     </q-card>
@@ -54,9 +54,12 @@
     </q-layout>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { Options, Vue } from 'vue-class-component';
+import { computed, ref } from 'vue';
 import { Dark, useQuasar } from 'quasar';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import axios from 'axios';
 
 interface LoginForm {
@@ -65,78 +68,75 @@ interface LoginForm {
     keepLogin: boolean;
 }
 
-@Options({
+const quasar = useQuasar();
+const store = useStore();
+const router = useRouter();
+const { t, locale } = useI18n();
+
+let username = ref('');
+let password = ref('');
+let keepLogin = true;
+
+const darkMode = computed({
+    get(): boolean {
+        return Dark.isActive;
+    },
+    set(value: boolean): void {
+        Dark.set(value);
+    },
+});
+
+function onSubmit(): void {
+    axios
+        .post('/api/accounts/login', {
+            user: username,
+            password: password,
+        })
+        .then((response) => {
+            store.dispatch('logIn', {
+                token: response.data.token,
+                keepLogin: keepLogin,
+            });
+
+            quasar.notify({
+                message: t('login.loginSuccess'),
+                type: 'positive',
+            });
+            router.push('/dashboard');
+        })
+        .catch((error) => {
+            console.log(error);
+            const errorCode = error.response.status;
+            if (errorCode === 401) {
+                quasar.notify({
+                    message: t('login.loginFailed'),
+                    type: 'negative',
+                });
+            } else {
+                quasar.notify({
+                    message: t('errors.statusInternalServerError'),
+                    type: 'negative',
+                });
+            }
+        });
+}
+
+/*     data(): LoginForm {
+        return {
+            username: '',
+            password: '',
+            keepLogin: true,
+        };
+    } */
+
+/* @Options({
     setup() {
         return {
             $q: useQuasar(),
         };
     },
 })
-export default class Login extends Vue {
+ */
-    username?: string;
-    password?: string;
-    keepLogin?: boolean;
-    private lang = 'es';
-
-    get mode(): boolean {
-        return Dark.isActive;
-    }
-
-    set mode(value: boolean) {
-        Dark.set(value);
-    }
-
-    get language(): string {
-        return this.lang;
-    }
-
-    set language(value: string) {
-        this.lang = value;
-        this.$i18n.locale = value;
-    }
-
-    onSubmit(): void {
-        axios
-            .post('/api/accounts/login', {
-                user: this.username,
-                password: this.password,
-            })
-            .then((response) => {
-                this.$store.dispatch('logIn', {
-                    token: response.data.token,
-                    keepLogin: this.keepLogin,
-                });
-
-                this.$q.notify({
-                    message: this.$t('login.loginSuccess'),
-                    type: 'positive',
-                });
-                this.$router.push('/dashboard');
-            })
-            .catch((error) => {
-                const errorCode = error.response.status;
-                if (errorCode === 401) {
-                    this.$q.notify({
-                        message: this.$t('login.loginFailed'),
-                        type: 'negative',
-                    });
-                } else {
-                    this.$q.notify({
-                        message: this.$t('errors.statusInternalServerError'),
-                        type: 'negative',
-                    });
-                }
-            });
-    }
-
-    data(): LoginForm {
-        return {
-            username: '',
-            password: '',
-            keepLogin: true,
-        };
-    }
-}
 </script>
 
 <style lang="scss" scoped>