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

@@ -1,8 +1,25 @@
 <template>
-  <v-footer color="primary" padless app>
-    <v-row justify="center" align="center" dense no-gutters>
-      <v-col class="py-2 text-center white--text" cols="12">
-        <v-btn color="white" icon href="https://github.com/hay-kot/mealie" target="_blank">
+  <v-footer
+    color="primary"
+    padless
+    app
+  >
+    <v-row
+      justify="center"
+      align="center"
+      dense
+      no-gutters
+    >
+      <v-col
+        class="py-2 text-center white--text"
+        cols="12"
+      >
+        <v-btn
+          color="white"
+          icon
+          href="https://github.com/hay-kot/mealie"
+          target="_blank"
+        >
           <v-icon>
             {{ $globals.icons.github }}
           </v-icon>
@@ -14,9 +31,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-
-export default defineComponent({
+export default defineNuxtComponent({
   setup() {
     return {};
   },

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>

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -1,66 +1,52 @@
 <template>
-  <v-navigation-drawer v-model="drawer" class="d-flex flex-column d-print-none" clipped app width="240px">
+  <v-navigation-drawer v-model="showDrawer" class="d-flex flex-column d-print-none position-fixed">
     <!-- User Profile -->
     <template v-if="loggedIn">
-      <v-list-item two-line :to="userProfileLink" exact>
-        <UserAvatar list :user-id="$auth.user.id" :tooltip="false" />
+      <v-list-item lines="two" :to="userProfileLink" exact>
+        <div class="d-flex align-center ga-2">
+          <UserAvatar list :user-id="sessionUser.id" :tooltip="false" />
 
-        <v-list-item-content>
-          <v-list-item-title class="pr-2"> {{ $auth.user.fullName }}</v-list-item-title>
-          <v-list-item-subtitle>
-            <v-btn v-if="isOwnGroup" class="px-2 pa-0" text :to="userFavoritesLink" small>
-              <v-icon left small>
-                {{ $globals.icons.heart }}
-              </v-icon>
-              {{ $t("user.favorite-recipes") }}
-            </v-btn>
-          </v-list-item-subtitle>
-        </v-list-item-content>
+          <div class="d-flex flex-column justify-start">
+            <v-list-item-title class="pr-2 pl-1">
+              {{ sessionUser.fullName }}
+            </v-list-item-title>
+            <v-list-item-subtitle class="opacity-100">
+              <v-btn v-if="isOwnGroup" class="px-2 pa-0" variant="text" :to="userFavoritesLink" size="small">
+                <v-icon start size="small">
+                  {{ $globals.icons.heart }}
+                </v-icon>
+                {{ $t("user.favorite-recipes") }}
+              </v-btn>
+            </v-list-item-subtitle>
+          </div>
+        </div>
       </v-list-item>
-      <v-divider></v-divider>
+      <v-divider />
     </template>
 
-    <slot></slot>
+    <slot />
 
     <!-- Primary Links -->
     <template v-if="topLink">
-      <v-list nav dense>
+      <v-list v-model:selected="secondarySelected" nav density="comfortable" color="primary">
         <template v-for="nav in topLink">
           <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
             <!-- Multi Items -->
-            <v-list-group
-              v-if="nav.children"
-              :key="(nav.key || nav.title) + 'multi-item'"
-              v-model="dropDowns[nav.title]"
-              color="primary"
-              :prepend-icon="nav.icon"
-            >
-              <template #activator>
-                <v-list-item-title>{{ nav.title }}</v-list-item-title>
+            <v-list-group v-if="nav.children" :key="(nav.key || nav.title) + 'multi-item'"
+              v-model="dropDowns[nav.title]" color="primary" :prepend-icon="nav.icon" :fluid="true">
+              <template #activator="{ props }">
+                <v-list-item v-bind="props" :prepend-icon="nav.icon" :title="nav.title" />
               </template>
 
-              <v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to" class="ml-2">
-                <v-list-item-icon>
-                  <v-icon>{{ child.icon }}</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>{{ child.title }}</v-list-item-title>
-              </v-list-item>
+              <v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to"
+                :prepend-icon="child.icon" :title="child.title" class="ml-4" />
             </v-list-group>
 
             <!-- Single Item -->
-            <v-list-item-group
-              v-else
-              :key="(nav.key || nav.title) + 'single-item'"
-              v-model="secondarySelected"
-              color="primary"
-            >
-              <v-list-item exact link :to="nav.to">
-                <v-list-item-icon>
-                  <v-icon>{{ nav.icon }}</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>{{ nav.title }}</v-list-item-title>
-              </v-list-item>
-            </v-list-item-group>
+            <template v-else>
+              <v-list-item :key="(nav.key || nav.title) + 'single-item'" exact link :to="nav.to"
+                :prepend-icon="nav.icon" :title="nav.title" />
+            </template>
           </div>
         </template>
       </v-list>
@@ -68,39 +54,28 @@
 
     <!-- Secondary Links -->
     <template v-if="secondaryLinks.length > 0">
-      <v-divider class="mt-2"></v-divider>
-      <v-list nav dense exact>
+      <v-divider class="mt-2" />
+      <v-list v-model:selected="secondarySelected" nav density="compact" exact>
         <template v-for="nav in secondaryLinks">
           <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
             <!-- Multi Items -->
-            <v-list-group
-              v-if="nav.children"
-              :key="(nav.key || nav.title) + 'multi-item'"
-              v-model="dropDowns[nav.title]"
-              color="primary"
-              :prepend-icon="nav.icon"
-            >
-              <template #activator>
-                <v-list-item-title>{{ nav.title }}</v-list-item-title>
+            <v-list-group v-if="nav.children" :key="(nav.key || nav.title) + 'multi-item'"
+              v-model="dropDowns[nav.title]" color="primary" :prepend-icon="nav.icon" fluid>
+              <template #activator="{ props }">
+                <v-list-item v-bind="props" :prepend-icon="nav.icon" :title="nav.title" />
               </template>
 
-              <v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to" class="ml-2">
-                <v-list-item-icon>
-                  <v-icon>{{ child.icon }}</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>{{ child.title }}</v-list-item-title>
-              </v-list-item>
+              <v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to"
+                class="ml-2" :prepend-icon="child.icon" :title="child.title" />
             </v-list-group>
 
             <!-- Single Item -->
-            <v-list-item-group v-else :key="(nav.key || nav.title) + 'single-item'" v-model="secondarySelected" color="primary">
-              <v-list-item exact link :to="nav.to">
-                <v-list-item-icon>
-                  <v-icon>{{ nav.icon }}</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>{{ nav.title }}</v-list-item-title>
-              </v-list-item>
-            </v-list-item-group>
+            <v-list-item v-else :key="(nav.key || nav.title) + 'single-item'" exact link :to="nav.to">
+              <template #prepend>
+                <v-icon>{{ nav.icon }}</v-icon>
+              </template>
+              <v-list-item-title>{{ nav.title }}</v-list-item-title>
+            </v-list-item>
           </div>
         </template>
       </v-list>
@@ -108,46 +83,39 @@
 
     <!-- Bottom Navigation Links -->
     <template v-if="bottomLinks" #append>
-      <v-list nav dense>
-        <v-list-item-group v-model="bottomSelected" color="primary">
-          <template v-for="nav in bottomLinks">
-            <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
-              <v-list-item
-                :key="nav.key || nav.title"
-                exact
-                link
-                :to="nav.to || null"
-                :href="nav.href || null"
-                :target="nav.href ? '_blank' : null"
-              >
-                <v-list-item-icon>
-                  <v-icon>{{ nav.icon }}</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>{{ nav.title }}</v-list-item-title>
-              </v-list-item>
-            </div>
-          </template>
-        </v-list-item-group>
-        <slot name="bottom"></slot>
+      <v-list v-model:selected="bottomSelected" nav density="compact">
+        <template v-for="nav in bottomLinks">
+          <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
+            <v-list-item :key="nav.key || nav.title" exact link :to="nav.to" :href="nav.href"
+              :target="nav.href ? '_blank' : null">
+              <template #prepend>
+                <v-icon>{{ nav.icon }}</v-icon>
+              </template>
+              <v-list-item-title>{{ nav.title }}</v-list-item-title>
+            </v-list-item>
+          </div>
+        </template>
+        <slot name="bottom" />
       </v-list>
     </template>
   </v-navigation-drawer>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, toRefs, useContext, watch } from "@nuxtjs/composition-api";
+import { useWindowSize } from "@vueuse/core";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
-import { SidebarLinks } from "~/types/application-types";
+import type { SidebarLinks } from "~/types/application-types";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
-export default defineComponent({
+export default defineNuxtComponent({
   components: {
     UserAvatar,
   },
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
-      default: null,
+      required: false,
+      default: false,
     },
     user: {
       type: Object,
@@ -165,31 +133,16 @@ export default defineComponent({
     bottomLinks: {
       type: Array as () => SidebarLinks,
       required: false,
-      default: null,
+      default: () => ([]),
     },
   },
+  emits: ["update:modelValue"],
   setup(props, context) {
-    // V-Model Support
-    const drawer = computed({
-      get: () => {
-        return props.value;
-      },
-      set: (val) => {
-        if (window.innerWidth < 760 && state.hasOpenedBefore === false) {
-          state.hasOpenedBefore = true;
-          val = false;
-          context.emit("input", val);
-        } else {
-          context.emit("input", val);
-        }
-      },
-    });
-
-    const { $auth } = useContext();
+    const $auth = useMealieAuth();
     const { loggedIn, isOwnGroup } = useLoggedInState();
 
-    const userFavoritesLink = computed(() => $auth.user ? `/user/${$auth.user.id}/favorites` : undefined);
-    const userProfileLink = computed(() => $auth.user ? "/user/profile" : undefined);
+    const userFavoritesLink = computed(() => $auth.user.value ? `/user/${$auth.user.value.id}/favorites` : undefined);
+    const userProfileLink = computed(() => $auth.user.value ? "/user/profile" : undefined);
 
     const state = reactive({
       dropDowns: {} as Record<string, boolean>,
@@ -198,12 +151,31 @@ export default defineComponent({
       bottomSelected: null as string[] | null,
       hasOpenedBefore: false as boolean,
     });
+    // model to control the drawer
+    const showDrawer = computed({
+      get: () => props.modelValue,
+      set: value => context.emit("update:modelValue", value),
+    });
+    watch(showDrawer, () => {
+      if (window.innerWidth < 760 && state.hasOpenedBefore === false) {
+        state.hasOpenedBefore = true;
+      }
+    });
+    const { width: wWidth } = useWindowSize();
+    watch(wWidth, (w) => {
+      if (w > 760) {
+        showDrawer.value = true;
+      }
+      else {
+        showDrawer.value = false;
+      }
+    });
 
     const allLinks = computed(() => [...props.topLink, ...(props.secondaryLinks || []), ...(props.bottomLinks || [])]);
     function initDropdowns() {
       allLinks.value.forEach((link) => {
         state.dropDowns[link.title] = link.childrenStartExpanded || false;
-      })
+      });
     }
     watch(
       () => allLinks,
@@ -212,22 +184,23 @@ export default defineComponent({
       },
       {
         deep: true,
-      }
+      },
     );
 
     return {
       ...toRefs(state),
       userFavoritesLink,
       userProfileLink,
-      drawer,
+      showDrawer,
       loggedIn,
       isOwnGroup,
+      sessionUser: $auth.user,
     };
   },
 });
 </script>
 
-<style>
+<style scoped>
 @media print {
   .no-print {
     display: none;

frontend/components/Layout/LayoutParts/TheSnackbar.vue

@@ -1,57 +1,75 @@
 <template>
   <div class="text-center">
-    <v-snackbar v-model="toastAlert.open" top :color="toastAlert.color" timeout="2000" @input="toastAlert.open = false">
-      <v-icon dark left>
-        {{ icon }}
-      </v-icon>
+    <v-snackbar
+      v-model="toastAlert.open"
+      location="top"
+      :color="toastAlert.color"
+      timeout="2000"
+    >
+      <v-icon
+        v-if="icon"
+        dark
+        start
+        :icon="icon"
+      />
 
       {{ toastAlert.title }}
       {{ toastAlert.text }}
 
-      <template #action="{ attrs }">
-        <v-btn text v-bind="attrs" @click="toastAlert.open = false"> {{ $t('general.close') }} </v-btn>
+      <template #actions>
+        <v-btn
+          variant="text"
+          @click="toastAlert.open = false"
+        >
+          {{ $t('general.close') }}
+        </v-btn>
       </template>
     </v-snackbar>
     <v-snackbar
+      v-model="toastLoading.open"
       content-class="py-2"
-      dense
-      bottom
-      right
-      :value="toastLoading.open"
+      density="compact"
+      location="bottom"
       :timeout="-1"
       :color="toastLoading.color"
-      @input="toastLoading.open = false"
     >
-      <div class="d-flex flex-column align-center justify-start" @click="toastLoading.open = false">
+      <div
+        class="d-flex flex-column align-center justify-start"
+        @click="toastLoading.open = false"
+      >
         <div class="mb-2 mt-0 text-subtitle-1 text-center">
           {{ toastLoading.text }}
         </div>
-        <v-progress-linear indeterminate color="white darken-2"></v-progress-linear>
+        <v-progress-linear
+          indeterminate
+          color="white-darken-2"
+        />
       </div>
     </v-snackbar>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { useNuxtApp } from "#app";
 import { toastAlert, toastLoading } from "~/composables/use-toast";
 
-export default defineComponent({
+export default {
   setup() {
+    const { $globals } = useNuxtApp();
     const icon = computed(() => {
       switch (toastAlert.color) {
         case "error":
-          return "mdi-alert";
+          return $globals.icons.alertOutline;
         case "success":
-          return "mdi-check-bold";
+          return $globals.icons.checkBold;
         case "info":
-          return "mdi-information-outline";
+          return $globals.icons.informationOutline;
         default:
-          return "mdi-alert";
+          return $globals.icons.alertOutline;
       }
     });
 
     return { icon, toastAlert, toastLoading };
   },
-});
+};
 </script>