chore: Nuxt 4 upgrade (#7426)

frontend/app/pages/g/[groupSlug]/r/create.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <v-container class="flex-column">
+      <BasePageTitle divider>
+        <template #header>
+          <v-img
+            width="100%"
+            max-height="175"
+            max-width="175"
+            src="/svgs/recipes-create.svg"
+          />
+        </template>
+        <template #title>
+          {{ $t('recipe.recipe-creation') }}
+        </template>
+        <template #content>
+          <div class="flex-1-1 d-flex flex-column justify-center align-center ga-2">
+            <p>{{ $t('recipe.select-one-of-the-various-ways-to-create-a-recipe') }}</p>
+            <div class="ml-auto">
+              <BaseOverflowButton
+                v-model="subpage"
+                rounded
+                :items="subpages"
+              />
+            </div>
+          </div>
+        </template>
+      </BasePageTitle>
+      <section>
+        <NuxtPage />
+      </section>
+    </v-container>
+
+    <AdvancedOnly>
+      <v-container class="d-flex justify-center align-center my-4">
+        <router-link
+          :to="`/group/migrations`"
+          class="text-primary"
+        > {{ $t('recipe.looking-for-migrations') }}</router-link>
+      </v-container>
+    </AdvancedOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from "~/components/global/BaseOverflowButton.vue";
+import AdvancedOnly from "~/components/global/AdvancedOnly.vue";
+
+definePageMeta({
+  middleware: ["group-only"],
+});
+
+const i18n = useI18n();
+const auth = useMealieAuth();
+const { $appInfo, $globals } = useNuxtApp();
+
+useSeoMeta({
+  title: i18n.t("general.create"),
+});
+
+const subpages = computed<MenuItem[]>(() => [
+  {
+    icon: $globals.icons.link,
+    text: i18n.t("recipe.import-with-url"),
+    value: "url",
+  },
+  {
+    icon: $globals.icons.link,
+    text: i18n.t("recipe.bulk-url-import"),
+    value: "bulk",
+  },
+  {
+    icon: $globals.icons.codeTags,
+    text: i18n.t("recipe.import-from-html-or-json"),
+    value: "html",
+  },
+  {
+    icon: $globals.icons.fileImage,
+    text: i18n.t("recipe.create-from-images"),
+    value: "image",
+    hide: !$appInfo.enableOpenaiImageServices,
+  },
+  {
+    icon: $globals.icons.edit,
+    text: i18n.t("recipe.create-recipe"),
+    value: "new",
+  },
+  {
+    icon: $globals.icons.zip,
+    text: i18n.t("recipe.import-with-zip"),
+    value: "zip",
+  },
+  {
+    icon: $globals.icons.robot,
+    text: i18n.t("recipe.debug-scraper"),
+    value: "debug",
+  },
+]);
+
+const route = useRoute();
+const router = useRouter();
+const groupSlug = computed(() => route.params.groupSlug || auth.user.value?.groupSlug || "");
+
+const subpage = computed({
+  set(subpage: string) {
+    router.push({ path: `/g/${groupSlug.value}/r/create/${subpage}`, query: route.query });
+  },
+  get() {
+    return route.path.split("/").pop() ?? "url";
+  },
+});
+</script>