feat: Migrate to Nuxt 3 framework (#5184)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/pages/admin/manage/users/index.vue

@@ -3,32 +3,52 @@
     <UserInviteDialog v-model="inviteDialog" />
     <BaseDialog
       v-model="deleteDialog"
-      :title="$tc('general.confirm')"
+      :title="$t('general.confirm')"
       color="error"
+      can-confirm
       @confirm="deleteUser(deleteTargetId)"
     >
-      <template #activator> </template>
+      <template #activator />
 
       <v-card-text>
-        <v-alert v-if="isUserOwnAccount" type="warning" text outlined>
-          {{ $t("general.confirm-delete-own-admin-account") }}
-        </v-alert>
+        <v-alert
+          v-if="isUserOwnAccount"
+          type="warning"
+          :text="$t('general.confirm-delete-own-admin-account')"
+          variant="outlined"
+        />
         {{ $t("general.confirm-delete-generic") }}
       </v-card-text>
     </BaseDialog>
 
-    <BaseCardSectionTitle :title="$tc('user.user-management')"> </BaseCardSectionTitle>
+    <BaseCardSectionTitle :title="$t('user.user-management')" />
     <section>
-      <v-toolbar color="transparent" flat class="justify-between">
-        <BaseButton to="/admin/manage/users/create" class="mr-2">
+      <v-toolbar
+        color="transparent"
+        flat
+        class="justify-between"
+      >
+        <BaseButton
+          to="/admin/manage/users/create"
+          class="mr-2"
+        >
           {{ $t("general.create") }}
         </BaseButton>
-        <BaseButton class="mr-2" color="info" :icon="$globals.icons.link" @click="inviteDialog = true">
+        <BaseButton
+          class="mr-2"
+          color="info"
+          :icon="$globals.icons.link"
+          @click="inviteDialog = true"
+        >
           {{ $t("group.invite") }}
         </BaseButton>
 
-        <BaseOverflowButton mode="event" :items="ACTIONS_OPTIONS" @unlock-all-users="unlockAllUsers">
-        </BaseOverflowButton>
+        <BaseOverflowButton
+          mode="event"
+          variant="elevated"
+          :items="ACTIONS_OPTIONS"
+          @unlock-all-users="unlockAllUsers"
+        />
       </v-toolbar>
       <v-data-table
         :headers="headers"
@@ -39,18 +59,22 @@
         hide-default-footer
         disable-pagination
         :search="search"
-        @click:row="handleRowClick"
+        @click:row="($event, { item }) => handleRowClick(item)"
       >
-        <template #item.admin="{ item }">
-          <v-icon right :color="item.admin ? 'success' : null">
+        <template #[`item.admin`]="{ item }">
+          <v-icon
+            end
+            :color="item.admin ? 'success' : undefined"
+          >
             {{ item.admin ? $globals.icons.checkboxMarkedCircle : $globals.icons.windowClose }}
           </v-icon>
         </template>
-        <template #item.actions="{ item }">
+        <template #[`item.actions`]="{ item }">
           <v-btn
             icon
-            :disabled="item.id == 1"
+            :disabled="+item.id == 1"
             color="error"
+            variant="text"
             @click.stop="
               deleteDialog = true;
               deleteTargetId = item.id;
@@ -62,33 +86,36 @@
           </v-btn>
         </template>
       </v-data-table>
-      <v-divider></v-divider>
+      <v-divider />
     </section>
   </v-container>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs, useContext, useRouter, computed } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { useUser, useAllUsers } from "~/composables/use-user";
-import { UserOut } from "~/lib/api/types/user";
+import type { UserOut } from "~/lib/api/types/user";
 import UserInviteDialog from "~/components/Domain/User/UserInviteDialog.vue";
 
-export default defineComponent({
+export default defineNuxtComponent({
   components: {
     UserInviteDialog,
   },
-  layout: "admin",
   setup() {
+    definePageMeta({
+      layout: "admin",
+    });
+
     const api = useAdminApi();
     const refUserDialog = ref();
     const inviteDialog = ref();
-    const { $auth } = useContext();
+    const $auth = useMealieAuth();
 
-    const user = computed(() => $auth.user);
+    const user = computed(() => $auth.user.value);
 
-    const { $globals, i18n } = useContext();
+    const i18n = useI18n();
+    const { $globals } = useNuxtApp();
 
     const router = useRouter();
 
@@ -120,7 +147,7 @@ export default defineComponent({
       deleteUserMixin(id);
 
       if (isUserOwnAccount.value) {
-        $auth.logout();
+        $auth.refresh();
       }
     }
 
@@ -133,18 +160,18 @@ export default defineComponent({
 
     const headers = [
       {
-        text: i18n.t("user.user-id"),
+        title: i18n.t("user.user-id"),
         align: "start",
         value: "id",
       },
-      { text: i18n.t("user.username"), value: "username" },
-      { text: i18n.t("user.full-name"), value: "fullName" },
-      { text: i18n.t("user.email"), value: "email" },
-      { text: i18n.t("group.group"), value: "group" },
-      { text: i18n.t("household.household"), value: "household" },
-      { text: i18n.t("user.auth-method"), value: "authMethod" },
-      { text: i18n.t("user.admin"), value: "admin" },
-      { text: i18n.t("general.delete"), value: "actions", sortable: false, align: "center" },
+      { title: i18n.t("user.username"), value: "username" },
+      { title: i18n.t("user.full-name"), value: "fullName" },
+      { title: i18n.t("user.email"), value: "email" },
+      { title: i18n.t("group.group"), value: "group" },
+      { title: i18n.t("household.household"), value: "household" },
+      { title: i18n.t("user.auth-method"), value: "authMethod" },
+      { title: i18n.t("user.admin"), value: "admin" },
+      { title: i18n.t("general.delete"), value: "actions", sortable: false, align: "center" },
     ];
 
     async function unlockAllUsers(): Promise<void> {
@@ -158,6 +185,10 @@ export default defineComponent({
       }
     }
 
+    useSeoMeta({
+      title: i18n.t("sidebar.manage-users"),
+    });
+
     return {
       isUserOwnAccount,
       unlockAllUsers,
@@ -175,7 +206,7 @@ export default defineComponent({
   },
   head() {
     return {
-      title: this.$t("sidebar.manage-users") as string,
+      title: useI18n().t("sidebar.manage-users"),
     };
   },
 });