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/Domain/Recipe/RecipeCard.vue

@@ -1,10 +1,14 @@
 <template>
   <v-lazy>
-    <v-hover v-slot="{ hover }" :open-delay="50">
+    <v-hover
+      v-slot="{ isHovering, props }"
+      :open-delay="50"
+    >
       <v-card
-        :class="{ 'on-hover': hover }"
+        v-bind="props"
+        :class="{ 'on-hover': isHovering }"
         :style="{ cursor }"
-        :elevation="hover ? 12 : 2"
+        :elevation="isHovering ? 12 : 2"
         :to="recipeRoute"
         :min-height="imageHeight + 75"
         @click.self="$emit('click')"
@@ -14,11 +18,15 @@
           :height="imageHeight"
           :slug="slug"
           :recipe-id="recipeId"
-          small
+          size="small"
           :image-version="image"
         >
           <v-expand-transition v-if="description">
-            <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
+            <div
+              v-if="isHovering"
+              class="d-flex transition-fast-in-fast-out bg-secondary v-card--reveal"
+              style="height: 100%"
+            >
               <v-card-text class="v-card--text-show white--text">
                 <div class="descriptionWrapper">
                   <SafeMarkdown :source="description" />
@@ -27,24 +35,47 @@
             </div>
           </v-expand-transition>
         </RecipeCardImage>
-        <v-card-title class="my-n3 px-2 mb-n6">
+        <v-card-title class="mb-n3 px-4">
           <div class="headerClass">
             {{ name }}
           </div>
         </v-card-title>
 
         <slot name="actions">
-          <v-card-actions v-if="showRecipeContent" class="px-1">
-            <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :recipe-id="recipeId" show-always />
+          <v-card-actions
+            v-if="showRecipeContent"
+            class="px-1"
+          >
+            <RecipeFavoriteBadge
+              v-if="isOwnGroup"
+              class="absolute"
+              :recipe-id="recipeId"
+              show-always
+            />
+            <div v-else class="px-1" /> <!-- Empty div to keep the layout consistent -->
 
-            <RecipeRating class="pb-1" :value="rating" :recipe-id="recipeId" :slug="slug" :small="true" />
-            <v-spacer></v-spacer>
-            <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" v-on="$listeners" />
+            <RecipeRating
+              class="ml-n2"
+              :value="rating"
+              :recipe-id="recipeId"
+              :slug="slug"
+              small
+            />
+            <v-spacer />
+            <RecipeChips
+              :truncate="true"
+              :items="tags"
+              :title="false"
+              :limit="2"
+              small
+              url-prefix="tags"
+              v-bind="$attrs"
+            />
 
             <!-- If we're not logged-in, no items display, so we hide this menu -->
             <RecipeContextMenu
               v-if="isOwnGroup"
-              color="grey darken-2"
+              color="grey-darken-2"
               :slug="slug"
               :name="name"
               :recipe-id="recipeId"
@@ -62,14 +93,13 @@
             />
           </v-card-actions>
         </slot>
-        <slot></slot>
+        <slot />
       </v-card>
     </v-hover>
   </v-lazy>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeChips from "./RecipeChips.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
@@ -77,7 +107,7 @@ import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeRating from "./RecipeRating.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
-export default defineComponent({
+export default defineNuxtComponent({
   components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
   props: {
     name: {
@@ -119,12 +149,13 @@ export default defineComponent({
       default: 200,
     },
   },
+  emits: ["click", "delete"],
   setup(props) {
-    const { $auth } = useContext();
+    const $auth = useMealieAuth();
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
-    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
     const showRecipeContent = computed(() => props.recipeId && props.slug);
     const recipeRoute = computed<string>(() => {
       return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
@@ -159,7 +190,7 @@ export default defineComponent({
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.descriptionWrapper{
+.descriptionWrapper {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 8;