feat: migrate to vue 3 (#2689)

---------

Co-authored-by: Joep <jcbuhre@gmail.com>
Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com>
Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/views/Settings.vue

@@ -7,27 +7,27 @@
         <ul>
           <router-link to="/settings/profile"
             ><li :class="{ active: $route.path === '/settings/profile' }">
-              {{ $t("settings.profileSettings") }}
+              {{ t("settings.profileSettings") }}
             </li></router-link
           >
-          <router-link to="/settings/shares" v-if="user.perm.share"
+          <router-link to="/settings/shares" v-if="user?.perm.share"
             ><li :class="{ active: $route.path === '/settings/shares' }">
-              {{ $t("settings.shareManagement") }}
+              {{ t("settings.shareManagement") }}
             </li></router-link
           >
-          <router-link to="/settings/global" v-if="user.perm.admin"
+          <router-link to="/settings/global" v-if="user?.perm.admin"
             ><li :class="{ active: $route.path === '/settings/global' }">
-              {{ $t("settings.globalSettings") }}
+              {{ t("settings.globalSettings") }}
             </li></router-link
           >
-          <router-link to="/settings/users" v-if="user.perm.admin"
+          <router-link to="/settings/users" v-if="user?.perm.admin"
             ><li
               :class="{
                 active:
                   $route.path === '/settings/users' || $route.name === 'User',
               }"
             >
-              {{ $t("settings.userManagement") }}
+              {{ t("settings.userManagement") }}
             </li></router-link
           >
         </ul>
@@ -41,7 +41,7 @@
           <div class="bounce2"></div>
           <div class="bounce3"></div>
         </div>
-        <span>{{ $t("files.loading") }}</span>
+        <span>{{ t("files.loading") }}</span>
       </h2>
     </div>
 
@@ -49,18 +49,18 @@
   </div>
 </template>
 
-<script>
-import { mapState } from "vuex";
-
+<script setup lang="ts">
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
 import HeaderBar from "@/components/header/HeaderBar.vue";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
-export default {
-  name: "settings",
-  components: {
-    HeaderBar,
-  },
-  computed: {
-    ...mapState(["user", "loading"]),
-  },
-};
+const { t } = useI18n();
+
+const authStore = useAuthStore();
+const layoutStore = useLayoutStore();
+
+const user = computed(() => authStore.user);
+const loading = computed(() => layoutStore.loading);
 </script>