Updated components to composition API

src/components/Topbar.vue

@@ -27,7 +27,7 @@
                 <q-btn dense flat no-wrap>
                     <q-avatar size="lg">
                         <q-img
-                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
                             spinner-color="white"
                         />
                     </q-avatar>
@@ -40,8 +40,9 @@
     </q-header>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { Options, Vue } from 'vue-class-component';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
 import UserPanel from '@/components/UserPanel.vue';
 
 interface UserProfile {
@@ -51,18 +52,13 @@ interface UserProfile {
     token: string;
 }
 
-@Options({
+const store = useStore();
-    components: {
+const user = computed((): UserProfile => {
-        UserPanel,
+    return {
-    },
+        id: store.state.user.id,
-})
+        username: store.state.user.username,
-export default class Topbar extends Vue {
+        nickname: store.state.user.nickname,
-    get user(): UserProfile {
+        token: store.getters.token,
-        return this.$store.state.user;
+    };
-    }
+});
-
-    get token(): string {
-        return this.$store.getters.token;
-    }
-}
 </script>

src/components/UserPanel.vue

@@ -2,16 +2,16 @@
     <q-menu>
         <div class="row no-wrap q-pa-md">
             <div class="column">
-                <div class="text-h6 q-mb-md">{{ $t('components.userPanel.settings') }}</div>
+                <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
                 <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-btn color="orange" outline size="sm" label="Settings" icon="settings" />
             </div>
@@ -21,7 +21,7 @@
             <div class="column items-center" style="min-width: 150px">
                 <q-avatar size="80px">
                     <q-img
-                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
                         spinner-color="white"
                     />
                 </q-avatar>
@@ -37,10 +37,18 @@
     </q-menu>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { Options, Vue } from 'vue-class-component';
+import { onMounted, computed } 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';
-import { Dark } from 'quasar';
+
+const quasar = useQuasar();
+const store = useStore();
+const router = useRouter();
+const { t, locale } = useI18n();
 
 interface UserProfile {
     id: number;
@@ -49,54 +57,42 @@ interface UserProfile {
     token: string;
 }
 
-@Options({})
+const darkMode = computed({
-export default class UserPanel extends Vue {
+    get(): boolean {
-    private lang = 'es';
+        return Dark.isActive;
+    },
+    set(value: boolean): void {
+        Dark.set(value);
+    },
+});
 
-    mounted(): void {
+const user = computed((): UserProfile => {
+    return {
+        id: store.state.user.id,
+        username: store.state.user.username,
+        nickname: store.state.user.nickname,
+        token: store.getters.token,
+    };
+});
+
+onMounted(() => {
     axios
         .get('/api/accounts/acl')
         .then((response) => {
-                this.$store.dispatch('updateUserData', response.data);
+            store.dispatch('updateUserData', response.data);
         })
         .catch(() => {
-                this.$q.notify({
+            quasar.notify({
-                    message: this.$t('errors.statusUnauthorized'),
+                message: t('errors.statusUnauthorized'),
                 type: 'negative',
             });
-                this.$store.dispatch('logOut');
+            store.dispatch('logOut');
-                this.$router.push('/login');
+            router.push('/login');
         });
-    }
+});
 
-    logout(): void {
+function logout(): void {
-        this.$store.dispatch('logOut');
+    store.dispatch('logOut');
-        this.$router.push('/login');
+    router.push('/login');
-    }
-
-    get user(): UserProfile {
-        return this.$store.state.user;
-    }
-
-    get token(): string {
-        return this.$store.getters.token;
-    }
-
-    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;
-    }
 }
 </script>