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/components/Layout/LayoutParts/AppHeader.vue

@@ -1,46 +1,83 @@
 <template>
-  <v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
+  <v-app-bar
+    clipped-left
+    density="compact"
+    app
+    color="primary"
+    dark
+    class="d-print-none"
+  >
     <slot />
     <router-link :to="routerLink">
-      <v-btn icon>
+      <v-btn
+        icon
+        color="white"
+      >
         <v-icon size="40"> {{ $globals.icons.primary }} </v-icon>
       </v-btn>
     </router-link>
 
-    <div btn class="pl-2">
-      <v-toolbar-title style="cursor: pointer" @click="$router.push(routerLink)"> Mealie </v-toolbar-title>
+    <div
+      btn
+      class="pl-2"
+    >
+      <v-toolbar-title
+        style="cursor: pointer"
+        @click="$router.push(routerLink)"
+      >
+        Mealie
+      </v-toolbar-title>
     </div>
     <RecipeDialogSearch ref="domSearchDialog" />
 
-    <v-spacer></v-spacer>
+    <v-spacer />
 
     <!-- Navigation Menu -->
     <template v-if="menu">
-      <div v-if="!$vuetify.breakpoint.xs" style="max-width: 500px" @click="activateSearch">
+      <v-responsive
+        v-if="!xs"
+        max-width="250"
+        @click="activateSearch"
+      >
         <v-text-field
           readonly
-          class="mt-6 rounded-xl"
+          class="mt-1"
           rounded
-          dark
-          solo
-          dense
+          variant="solo-filled"
+          density="compact"
           flat
           :prepend-inner-icon="$globals.icons.search"
-          background-color="primary darken-1"
-          color="white"
+          bg-color="primary-darken-1"
           :placeholder="$t('search.search-hint')"
-        >
-        </v-text-field>
-      </div>
-      <v-btn v-else icon @click="activateSearch">
+        />
+      </v-responsive>
+      <v-btn
+        v-else
+        icon
+        @click="activateSearch"
+      >
         <v-icon> {{ $globals.icons.search }}</v-icon>
       </v-btn>
-      <v-btn v-if="loggedIn" :text="$vuetify.breakpoint.smAndUp" :icon="$vuetify.breakpoint.xs" @click="logout()">
-        <v-icon :left="$vuetify.breakpoint.smAndUp">{{ $globals.icons.logout }}</v-icon>
-        {{ $vuetify.breakpoint.smAndUp ? $t("user.logout") : "" }}
+      <v-btn
+        v-if="loggedIn"
+        :variant="smAndUp ? 'text' : undefined"
+        :icon="xs"
+        @click="logout()"
+      >
+        <v-icon :start="smAndUp">
+          {{ $globals.icons.logout }}
+        </v-icon>
+        {{ smAndUp ? $t("user.logout") : "" }}
       </v-btn>
-      <v-btn v-else text nuxt to="/login">
-        <v-icon left>{{ $globals.icons.user }}</v-icon>
+      <v-btn
+        v-else
+        variant="text"
+        nuxt
+        to="/login"
+      >
+        <v-icon start>
+          {{ $globals.icons.user }}
+        </v-icon>
         {{ $t("user.login") }}
       </v-btn>
     </template>
@@ -48,11 +85,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, useContext, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipeDialogSearch from "~/components/Domain/Recipe/RecipeDialogSearch.vue";
 
-export default defineComponent({
+export default defineNuxtComponent({
   components: { RecipeDialogSearch },
   props: {
     menu: {
@@ -61,11 +97,11 @@ export default defineComponent({
     },
   },
   setup() {
-    const { $auth } = useContext();
+    const $auth = useMealieAuth();
     const { loggedIn } = useLoggedInState();
     const route = useRoute();
-    const router = useRouter();
-    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+    const { xs, smAndUp } = useDisplay();
 
     const routerLink = computed(() => groupSlug.value ? `/g/${groupSlug.value}` : "/");
     const domSearchDialog = ref<InstanceType<typeof RecipeDialogSearch> | null>(null);
@@ -91,7 +127,12 @@ export default defineComponent({
     });
 
     async function logout() {
-        await $auth.logout().then(() => router.push("/login?direct=1"))
+      try {
+        await $auth.signOut({ callbackUrl: "/login?direct=1" });
+      }
+      catch (e) {
+        console.error(e);
+      }
     }
 
     return {
@@ -100,7 +141,14 @@ export default defineComponent({
       routerLink,
       loggedIn,
       logout,
+      xs, smAndUp,
     };
   },
 });
 </script>
+
+<style scoped>
+.v-toolbar {
+  z-index: 1010 !important;
+}
+</style>