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

@@ -1,13 +1,13 @@
 <template>
   <errors v-if="error" :errorCode="error.status" />
-  <div class="row" v-else-if="!loading">
+  <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <div class="card">
         <div class="card-title">
-          <h2>{{ $t("settings.users") }}</h2>
+          <h2>{{ t("settings.users") }}</h2>
           <router-link to="/settings/users/new"
             ><button class="button">
-              {{ $t("buttons.new") }}
+              {{ t("buttons.new") }}
             </button></router-link
           >
         </div>
@@ -15,9 +15,9 @@
         <div class="card-content full">
           <table>
             <tr>
-              <th>{{ $t("settings.username") }}</th>
-              <th>{{ $t("settings.admin") }}</th>
-              <th>{{ $t("settings.scope") }}</th>
+              <th>{{ t("settings.username") }}</th>
+              <th>{{ t("settings.admin") }}</th>
+              <th>{{ t("settings.scope") }}</th>
               <th></th>
             </tr>
 
@@ -41,38 +41,31 @@
   </div>
 </template>
 
-<script>
-import { mapState, mapMutations } from "vuex";
+<script setup lang="ts">
+import { useLayoutStore } from "@/stores/layout";
 import { users as api } from "@/api";
 import Errors from "@/views/Errors.vue";
+import { onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { StatusError } from "@/api/utils";
 
-export default {
-  name: "users",
-  components: {
-    Errors,
-  },
-  data: function () {
-    return {
-      error: null,
-      users: [],
-    };
-  },
-  async created() {
-    this.setLoading(true);
+const error = ref<StatusError | null>(null);
+const users = ref<IUser[]>([]);
 
-    try {
-      this.users = await api.getAll();
-    } catch (e) {
-      this.error = e;
-    } finally {
-      this.setLoading(false);
+const layoutStore = useLayoutStore();
+const { t } = useI18n();
+
+onMounted(async () => {
+  layoutStore.loading = true;
+
+  try {
+    users.value = await api.getAll();
+  } catch (err) {
+    if (err instanceof Error) {
+      error.value = err;
     }
-  },
-  computed: {
-    ...mapState(["loading"]),
-  },
-  methods: {
-    ...mapMutations(["setLoading"]),
-  },
-};
+  } finally {
+    layoutStore.loading = false;
+  }
+});
 </script>