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/g/[groupSlug]/r/[slug]/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <RecipePage
+      v-if="recipe"
+      v-model="recipe"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { whenever } from "@vueuse/core";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import { useAsyncKey } from "~/composables/use-utils";
+import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
+import { usePublicExploreApi } from "~/composables/api/api-client";
+import { useRecipe } from "~/composables/recipes";
+import type { Recipe } from "~/lib/api/types/recipe";
+
+const $auth = useMealieAuth();
+const { isOwnGroup } = useLoggedInState();
+const route = useRoute();
+const title = ref(route.meta?.title ?? "");
+useSeoMeta({ title });
+
+const router = useRouter();
+const slug = route.params.slug as string;
+
+const recipe = ref<Recipe | null>(null);
+if (isOwnGroup.value) {
+  const { recipe: data } = useRecipe(slug);
+  watch(data, (value) => {
+    recipe.value = value;
+  });
+}
+else {
+  const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+  const api = usePublicExploreApi(groupSlug.value);
+  const { data } = await useAsyncData(useAsyncKey(), async () => {
+    const { data, error } = await api.explore.recipes.getOne(slug);
+    if (error) {
+      console.error("error loading recipe -> ", error);
+      router.push(`/g/${groupSlug.value}`);
+    }
+
+    return data;
+  });
+  recipe.value = data.value;
+}
+
+whenever(
+  () => recipe.value,
+  () => {
+    if (recipe.value && recipe.value.name) {
+      title.value = recipe.value.name;
+    }
+  },
+);
+</script>

frontend/pages/g/[groupSlug]/r/[slug]/ingredient-parser.vue

@@ -0,0 +1,440 @@
+<template>
+  <v-container v-if="recipe">
+    <v-container>
+      <BaseCardSectionTitle :title="$t('recipe.parser.ingredient-parser')">
+        <div class="mt-4">
+          {{ $t("recipe.parser.explanation") }}
+        </div>
+
+        <div class="my-4">
+          {{ $t("recipe.parser.alerts-explainer") }}
+        </div>
+        <div class="d-flex align-center mb-n4">
+          <div class="mb-4">
+            {{ $t("recipe.parser.select-parser") }}
+          </div>
+          <BaseOverflowButton
+            v-model="parser"
+            btn-class="mx-2 mb-4"
+            :items="availableParsers"
+          />
+        </div>
+      </BaseCardSectionTitle>
+
+      <div
+        class="d-flex mt-n3 mb-4 justify-end"
+        style="gap: 5px"
+      >
+        <BaseButton
+          cancel
+          class="mr-auto"
+          @click="$router.go(-1)"
+        />
+        <BaseButton
+          color="info"
+          :disabled="parserLoading"
+          @click="fetchParsed"
+        >
+          <template #icon>
+            {{ $globals.icons.foods }}
+          </template>
+          {{ $t("recipe.parser.parse-all") }}
+        </BaseButton>
+        <BaseButton
+          save
+          :disabled="parserLoading"
+          @click="saveAll"
+        />
+      </div>
+
+      <div v-if="parserLoading">
+        <AppLoader
+          v-if="parserLoading"
+          :loading="parserLoading"
+          waiting-text=""
+        />
+      </div>
+      <div v-else>
+        <v-expansion-panels
+          v-model="panels"
+          multiple
+        >
+          <VueDraggable
+            v-if="parsedIng.length > 0"
+            v-model="parsedIng"
+            handle=".handle"
+            :delay="250"
+            :delay-on-touch-only="true"
+            :style="{ width: '100%' }"
+            ghost-class="ghost"
+          >
+            <v-expansion-panel
+              v-for="(ing, index) in parsedIng"
+              :key="index"
+            >
+              <v-expansion-panel-title
+                class="my-0 py-0"
+                disable-icon-rotate
+              >
+                <template #default="{ expanded }">
+                  <v-fade-transition>
+                    <span
+                      v-if="!expanded"
+                      key="0"
+                    > {{ ing.input }} </span>
+                  </v-fade-transition>
+                </template>
+                <template #actions>
+                  <v-icon
+                    start
+                    :color="isError(ing) ? 'error' : 'success'"
+                  >
+                    {{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
+                  </v-icon>
+                  <div
+                    class="my-auto"
+                    :color="isError(ing) ? 'error-text' : 'success-text'"
+                  >
+                    {{ ing.confidence ? asPercentage(ing.confidence.average!) : "" }}
+                  </div>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text class="pb-0 mb-0">
+                <RecipeIngredientEditor
+                  v-model="parsedIng[index].ingredient"
+                  allow-insert-ingredient
+                  @insert-ingredient="insertIngredient(index)"
+                  @delete="deleteIngredient(index)"
+                />
+                {{ ing.input }}
+                <v-card-actions>
+                  <v-spacer />
+                  <BaseButton
+                    v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
+                    color="warning"
+                    size="small"
+                    @click="createUnit(ing.ingredient.unit!, index)"
+                  >
+                    {{ errors[index].unitErrorMessage }}
+                  </BaseButton>
+                  <BaseButton
+                    v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
+                    color="warning"
+                    size="small"
+                    @click="createFood(ing.ingredient.food!, index)"
+                  >
+                    {{ errors[index].foodErrorMessage }}
+                  </BaseButton>
+                </v-card-actions>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </VueDraggable>
+        </v-expansion-panels>
+      </div>
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { invoke, until } from "@vueuse/core";
+import { VueDraggable } from "vue-draggable-plus";
+import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
+import { alert } from "~/composables/use-toast";
+import { useAppInfo, useUserApi } from "~/composables/api";
+import { useRecipe } from "~/composables/recipes";
+import { useFoodData, useFoodStore, useUnitData, useUnitStore } from "~/composables/store";
+import { useParsingPreferences } from "~/composables/use-users/preferences";
+import { uuid4 } from "~/composables/use-utils";
+import type {
+  CreateIngredientFood,
+  CreateIngredientUnit,
+  IngredientFood,
+  IngredientUnit,
+  ParsedIngredient,
+  RecipeIngredient,
+} from "~/lib/api/types/recipe";
+import type { Parser } from "~/lib/api/user/recipes/recipe";
+
+interface Error {
+  ingredientIndex: number;
+  unitError: boolean;
+  unitErrorMessage: string;
+  foodError: boolean;
+  foodErrorMessage: string;
+}
+
+export default defineNuxtComponent({
+  components: {
+    RecipeIngredientEditor,
+    VueDraggable,
+  },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    const i18n = useI18n();
+    const $auth = useMealieAuth();
+    const panels = ref<number[]>([]);
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+    const router = useRouter();
+    const slug = route.params.slug as string;
+    const api = useUserApi();
+    const appInfo = useAppInfo();
+
+    const { recipe, loading } = useRecipe(slug);
+    const parserLoading = ref(false);
+
+    invoke(async () => {
+      await until(recipe).not.toBeNull();
+
+      fetchParsed();
+    });
+
+    const ingredients = ref<any[]>([]);
+
+    const availableParsers = computed(() => {
+      return [
+        {
+          text: i18n.t("recipe.parser.natural-language-processor"),
+          value: "nlp",
+        },
+        {
+          text: i18n.t("recipe.parser.brute-parser"),
+          value: "brute",
+        },
+        {
+          text: i18n.t("recipe.parser.openai-parser"),
+          value: "openai",
+          hide: !appInfo.value?.enableOpenai,
+        },
+      ];
+    });
+
+    // =========================================================
+    // Parser Logic
+    const parserPreferences = useParsingPreferences();
+    const parser = ref<Parser>(parserPreferences.value.parser || "nlp");
+    const parsedIng = ref<ParsedIngredient[]>([]);
+    watch(parser, (val) => {
+      parserPreferences.value.parser = val;
+    });
+
+    function processIngredientError(ing: ParsedIngredient, index: number): Error {
+      const unitError = !checkForUnit(ing.ingredient.unit!);
+      const foodError = !checkForFood(ing.ingredient.food!);
+
+      let unitErrorMessage = "";
+      let foodErrorMessage = "";
+
+      if (unitError || foodError) {
+        if (unitError) {
+          if (ing?.ingredient?.unit?.name) {
+            const unit = ing.ingredient.unit.name || i18n.t("recipe.parser.no-unit");
+            unitErrorMessage = i18n.t("recipe.parser.missing-unit", { unit }).toString();
+          }
+        }
+
+        if (foodError) {
+          if (ing?.ingredient?.food?.name) {
+            const food = ing.ingredient.food.name || i18n.t("recipe.parser.no-food");
+            foodErrorMessage = i18n.t("recipe.parser.missing-food", { food }).toString();
+          }
+        }
+      }
+      panels.value.push(index);
+
+      return {
+        ingredientIndex: index,
+        unitError,
+        unitErrorMessage,
+        foodError,
+        foodErrorMessage,
+      } as Error;
+    }
+
+    async function fetchParsed() {
+      if (!recipe.value || !recipe.value.recipeIngredient) {
+        return;
+      }
+      const raw = recipe.value.recipeIngredient.map(ing => ing.note ?? "");
+
+      parserLoading.value = true;
+      const { data } = await api.recipes.parseIngredients(parser.value, raw);
+      parserLoading.value = false;
+
+      if (data) {
+        // When we send the recipe ingredient text to be parsed, we lose the reference to the original unparsed ingredient.
+        // Generally this is fine, but if the unparsed ingredient had a title, we lose it; we add back the title for each ingredient here.
+        try {
+          for (let i = 0; i < recipe.value.recipeIngredient.length; i++) {
+            data[i].ingredient.title = recipe.value.recipeIngredient[i].title;
+          }
+        }
+        catch {
+          console.error("Index Mismatch Error during recipe ingredient parsing; did the number of ingredients change?");
+        }
+
+        parsedIng.value = data;
+
+        errors.value = data.map((ing, index: number) => {
+          return processIngredientError(ing, index);
+        });
+      }
+      else {
+        alert.error(i18n.t("events.something-went-wrong") as string);
+        parsedIng.value = [];
+      }
+    }
+
+    function isError(ing: ParsedIngredient) {
+      if (!ing?.confidence?.average) {
+        return true;
+      }
+      return !(ing.confidence.average >= 0.75);
+    }
+
+    function asPercentage(num: number | undefined): string {
+      if (!num) {
+        return "0%";
+      }
+
+      return Math.round(num * 100).toFixed(2) + "%";
+    }
+
+    // =========================================================
+    // Food and Ingredient Logic
+
+    const foodStore = useFoodStore();
+    const foodData = useFoodData();
+    const unitStore = useUnitStore();
+    const unitData = useUnitData();
+
+    const errors = ref<Error[]>([]);
+
+    function checkForUnit(unit?: IngredientUnit | CreateIngredientUnit) {
+      return !!unit?.id;
+    }
+
+    function checkForFood(food?: IngredientFood | CreateIngredientFood) {
+      return !!food?.id;
+    }
+
+    async function createFood(food: CreateIngredientFood | undefined, index: number) {
+      if (!food) {
+        return;
+      }
+
+      foodData.data.name = food.name;
+      parsedIng.value[index].ingredient.food = await foodStore.actions.createOne(foodData.data) || undefined;
+      errors.value[index].foodError = false;
+
+      foodData.reset();
+    }
+
+    async function createUnit(unit: CreateIngredientUnit | undefined, index: number) {
+      if (!unit) {
+        return;
+      }
+
+      unitData.data.name = unit.name;
+      parsedIng.value[index].ingredient.unit = await unitStore.actions.createOne(unitData.data) || undefined;
+      errors.value[index].unitError = false;
+
+      unitData.reset();
+    }
+
+    function insertIngredient(index: number) {
+      if (!recipe.value?.recipeIngredient) {
+        return;
+      }
+
+      const ing = {
+        input: "",
+        confidence: {},
+        ingredient: {
+          quantity: 1.0,
+          disableAmount: false,
+          referenceId: uuid4(),
+        },
+      } as ParsedIngredient;
+
+      parsedIng.value.splice(index, 0, ing);
+      recipe.value.recipeIngredient.splice(index, 0, ing.ingredient);
+
+      errors.value = parsedIng.value.map((ing, index: number) => {
+        return processIngredientError(ing, index);
+      });
+    }
+
+    function deleteIngredient(index: number) {
+      parsedIng.value.splice(index, 1);
+      recipe.value?.recipeIngredient?.splice(index, 1);
+
+      errors.value = parsedIng.value.map((ing, index: number) => {
+        return processIngredientError(ing, index);
+      });
+    }
+
+    // =========================================================
+    // Save All Logic
+    async function saveAll() {
+      const ingredients = parsedIng.value.map((ing) => {
+        if (!checkForFood(ing.ingredient.food!)) {
+          ing.ingredient.food = undefined;
+        }
+
+        if (!checkForUnit(ing.ingredient.unit!)) {
+          ing.ingredient.unit = undefined;
+        }
+
+        return {
+          ...ing.ingredient,
+          originalText: ing.input,
+        } as RecipeIngredient;
+      });
+
+      if (!recipe.value || !recipe.value.slug) {
+        return;
+      }
+
+      recipe.value.recipeIngredient = ingredients;
+      if (recipe.value.settings) {
+        recipe.value.settings.disableAmount = false;
+      }
+
+      const { response } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
+
+      if (response?.status === 200) {
+        router.push(`/g/${groupSlug.value}/r/${recipe.value.slug}`);
+      }
+    }
+
+    useSeoMeta({
+      title: i18n.t("recipe.parser.ingredient-parser"),
+    });
+
+    return {
+      parser,
+      availableParsers,
+      saveAll,
+      createFood,
+      createUnit,
+      deleteIngredient,
+      insertIngredient,
+      errors,
+      actions: foodStore.actions,
+      workingFoodData: foodData,
+      isError,
+      panels,
+      asPercentage,
+      fetchParsed,
+      parsedIng,
+      recipe,
+      loading,
+      parserLoading,
+      ingredients,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <v-container class="flex-column">
+      <BasePageTitle divider>
+        <template #header>
+          <v-img
+            width="100%"
+            max-height="175"
+            max-width="175"
+            :src="require('~/static/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 lang="ts">
+import { useAppInfo } from "~/composables/api";
+import type { MenuItem } from "~/components/global/BaseOverflowButton.vue";
+import AdvancedOnly from "~/components/global/AdvancedOnly.vue";
+
+export default defineNuxtComponent({
+  components: { AdvancedOnly },
+  middleware: ["sidebase-auth", "group-only"],
+  setup() {
+    const i18n = useI18n();
+    const $auth = useMealieAuth();
+    const $globals = useNuxtApp().$globals;
+
+    useSeoMeta({
+      title: i18n.t("general.create"),
+    });
+
+    const appInfo = useAppInfo();
+    const enableOpenAIImages = computed(() => appInfo.value?.enableOpenaiImageServices);
+
+    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-image"),
+        value: "image",
+        hide: !enableOpenAIImages.value,
+      },
+      {
+        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";
+      },
+    });
+
+    return {
+      groupSlug,
+      subpages,
+      subpage,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <div>
+      <v-card-title class="headline">
+        {{ $t('recipe.recipe-bulk-importer') }}
+      </v-card-title>
+      <v-card-text>
+        {{ $t('recipe.recipe-bulk-importer-description') }}
+      </v-card-text>
+    </div>
+    <section class="mt-2">
+      <v-row
+        v-for="(_, idx) in bulkUrls"
+        :key="'bulk-url' + idx"
+        class="my-1"
+        density="compact"
+      >
+        <v-col
+          cols="12"
+          xs="12"
+          sm="12"
+          md="12"
+        >
+          <v-text-field
+            v-model="bulkUrls[idx].url"
+            :label="$t('new-recipe.recipe-url')"
+            density="compact"
+            single-line
+            validate-on="blur"
+            autofocus
+            variant="solo-filled"
+            hide-details
+            clearable
+            :prepend-inner-icon="$globals.icons.link"
+            rounded
+            class="rounded-lg"
+          >
+            <template #append>
+              <v-btn
+                style="margin-top: -2px"
+                icon
+                size="small"
+                @click="bulkUrls.splice(idx, 1)"
+              >
+                <v-icon>
+                  {{ $globals.icons.delete }}
+                </v-icon>
+              </v-btn>
+            </template>
+          </v-text-field>
+        </v-col>
+        <template v-if="showCatTags">
+          <v-col
+            cols="12"
+            xs="12"
+            sm="6"
+          >
+            <RecipeOrganizerSelector
+              v-model="bulkUrls[idx].categories"
+              selector-type="categories"
+              :input-attrs="{
+                variant: 'filled',
+                singleLine: true,
+                density: 'compact',
+                rounded: true,
+                class: 'rounded-lg',
+                hideDetails: true,
+                clearable: true,
+              }"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            xs="12"
+            sm="6"
+          >
+            <RecipeOrganizerSelector
+              v-model="bulkUrls[idx].tags"
+              selector-type="tags"
+              :input-attrs="{
+                variant: 'filled',
+                singleLine: true,
+                density: 'compact',
+                rounded: true,
+                class: 'rounded-lg',
+                hideDetails: true,
+                clearable: true,
+              }"
+            />
+          </v-col>
+        </template>
+      </v-row>
+      <v-card-actions class="justify-end flex-wrap mb-1">
+        <BaseButton
+          delete
+          @click="
+            bulkUrls = [];
+            lockBulkImport = false;
+          "
+        >
+          {{ $t('general.clear') }}
+        </BaseButton>
+        <v-spacer />
+        <BaseButton
+          class="mr-1 mb-1"
+          color="info"
+          @click="bulkUrls.push({ url: '', categories: [], tags: [] })"
+        >
+          <template #icon>
+            {{ $globals.icons.createAlt }}
+          </template>
+          {{ $t('general.new') }}
+        </BaseButton>
+        <RecipeDialogBulkAdd
+          v-model="bulkDialog"
+          class="mr-1 mr-sm-0 mb-1"
+          @bulk-data="assignUrls"
+        />
+      </v-card-actions>
+      <div class="px-1">
+        <v-checkbox
+          v-model="showCatTags"
+          hide-details
+          :label="$t('recipe.set-categories-and-tags')"
+        />
+      </div>
+      <v-card-actions class="justify-end">
+        <BaseButton
+          :disabled="bulkUrls.length === 0 || lockBulkImport"
+          @click="bulkCreate"
+        >
+          <template #icon>
+            {{ $globals.icons.check }}
+          </template>
+          {{ $t('general.submit') }}
+        </BaseButton>
+      </v-card-actions>
+    </section>
+    <section class="mt-12">
+      <BaseCardSectionTitle :title="$t('recipe.bulk-imports')" />
+      <ReportTable
+        :items="reports"
+        @delete="deleteReport"
+      />
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { whenever } from "@vueuse/shared";
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
+import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
+import type { ReportSummary } from "~/lib/api/types/reports";
+import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
+
+export default defineNuxtComponent({
+  components: { RecipeOrganizerSelector, RecipeDialogBulkAdd },
+  setup() {
+    const state = reactive({
+      error: false,
+      loading: false,
+      showCatTags: false,
+      bulkDialog: false,
+    });
+
+    whenever(
+      () => !state.showCatTags,
+      () => {
+        console.log("showCatTags changed");
+      },
+    );
+
+    const api = useUserApi();
+    const i18n = useI18n();
+
+    const bulkUrls = ref([{ url: "", categories: [], tags: [] }]);
+    const lockBulkImport = ref(false);
+
+    async function bulkCreate() {
+      if (bulkUrls.value.length === 0) {
+        return;
+      }
+
+      const { response } = await api.recipes.createManyByUrl({ imports: bulkUrls.value });
+
+      if (response?.status === 202) {
+        alert.success(i18n.t("recipe.bulk-import-process-has-started"));
+        lockBulkImport.value = true;
+      }
+      else {
+        alert.error(i18n.t("recipe.bulk-import-process-has-failed"));
+      }
+
+      fetchReports();
+    }
+
+    // =========================================================
+    // Reports
+
+    const reports = ref<ReportSummary[]>([]);
+
+    async function fetchReports() {
+      const { data } = await api.groupReports.getAll("bulk_import");
+      reports.value = data ?? [];
+    }
+
+    async function deleteReport(id: string) {
+      console.log(id);
+      const { response } = await api.groupReports.deleteOne(id);
+
+      if (response?.status === 200) {
+        fetchReports();
+      }
+      else {
+        alert.error(i18n.t("recipe.report-deletion-failed"));
+      }
+    }
+
+    fetchReports();
+
+    function assignUrls(urls: string[]) {
+      bulkUrls.value = urls.map(url => ({ url, categories: [], tags: [] }));
+    }
+
+    return {
+      assignUrls,
+      reports,
+      deleteReport,
+      bulkCreate,
+      bulkUrls,
+      lockBulkImport,
+      ...toRefs(state),
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <v-form
+      ref="domUrlForm"
+      @submit.prevent="debugUrl(recipeUrl)"
+    >
+      <div>
+        <v-card-title class="headline">
+          {{ $t('recipe.recipe-debugger') }}
+        </v-card-title>
+        <v-card-text>
+          {{ $t('recipe.recipe-debugger-description') }}
+          <v-text-field
+            v-model="recipeUrl"
+            :label="$t('new-recipe.recipe-url')"
+            validate-on="blur"
+            :prepend-inner-icon="$globals.icons.link"
+            autofocus
+            variant="solo-filled"
+            clearable
+            rounded
+            class="rounded-lg mt-2"
+            :rules="[validators.url]"
+            :hint="$t('new-recipe.url-form-hint')"
+            persistent-hint
+          />
+        </v-card-text>
+        <v-card-text v-if="appInfo && appInfo.enableOpenai">
+          {{ $t('recipe.recipe-debugger-use-openai-description') }}
+          <v-checkbox
+            v-model="useOpenAI"
+            :label="$t('recipe.use-openai')"
+          />
+        </v-card-text>
+        <v-card-actions class="justify-center">
+          <div style="width: 250px">
+            <BaseButton
+              :disabled="recipeUrl === null"
+              rounded
+              block
+              type="submit"
+              color="info"
+              :loading="loading"
+            >
+              <template #icon>
+                {{ $globals.icons.robot }}
+              </template>
+              {{ $t('recipe.debug') }}
+            </BaseButton>
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+    <section v-if="debugData">
+      <v-checkbox
+        v-model="debugTreeView"
+        :label="$t('recipe.tree-view')"
+      />
+      <RecipeJsonEditor
+        v-model="debugData"
+        height="700px"
+        :mode="debugTreeView ? 'tree' : 'text'"
+        :main-menu-bar="false"
+        :read-only="true"
+      />
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { useAppInfo, useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+import type { Recipe } from "~/lib/api/types/recipe";
+
+export default defineNuxtComponent({
+  setup() {
+    const state = reactive({
+      error: false,
+      loading: false,
+      useOpenAI: false,
+    });
+
+    const api = useUserApi();
+    const route = useRoute();
+    const router = useRouter();
+    const appInfo = useAppInfo();
+
+    const recipeUrl = computed({
+      set(recipe_import_url: string | null) {
+        if (recipe_import_url !== null) {
+          recipe_import_url = recipe_import_url.trim();
+          router.replace({ query: { ...route.query, recipe_import_url } });
+        }
+      },
+      get() {
+        return route.query.recipe_import_url as string | null;
+      },
+    });
+
+    const debugTreeView = ref(false);
+
+    const debugData = ref<Recipe | null>(null);
+
+    async function debugUrl(url: string | null) {
+      if (url === null) {
+        return;
+      }
+
+      state.loading = true;
+
+      const { data } = await api.recipes.testCreateOneUrl(url, state.useOpenAI);
+
+      state.loading = false;
+      debugData.value = data;
+    }
+
+    return {
+      appInfo,
+      recipeUrl,
+      debugTreeView,
+      debugUrl,
+      debugData,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,185 @@
+<template>
+  <v-form
+    ref="domUrlForm"
+    @submit.prevent="createFromHtmlOrJson(newRecipeData, importKeywordsAsTags, stayInEditMode)"
+  >
+    <div>
+      <v-card-title class="headline">
+        {{ $t('recipe.import-from-html-or-json') }}
+      </v-card-title>
+      <v-card-text>
+        <p>
+          {{ $t("recipe.import-from-html-or-json-description") }}
+        </p>
+        <p>
+          {{ $t("recipe.json-import-format-description-colon") }}
+          <a
+            href="https://schema.org/Recipe"
+            target="_blank"
+          >https://schema.org/Recipe</a>
+        </p>
+        <v-switch
+          v-model="isEditJSON"
+          :label="$t('recipe.json-editor')"
+          class="mt-2"
+          @change="handleIsEditJson"
+        />
+        <RecipeJsonEditor
+          v-if="isEditJSON"
+          v-model="newRecipeData"
+          height="250px"
+          class="mt-10"
+          mode="code"
+          :main-menu-bar="false"
+        />
+        <v-textarea
+          v-else
+          v-model="newRecipeData"
+          :label="$t('new-recipe.recipe-html-or-json')"
+          :prepend-inner-icon="$globals.icons.codeTags"
+          validate-on="blur"
+          autofocus
+          variant="solo-filled"
+          clearable
+          class="rounded-lg mt-2"
+          rounded
+          :hint="$t('new-recipe.url-form-hint')"
+          persistent-hint
+        />
+        <v-checkbox
+          v-model="importKeywordsAsTags"
+          hide-details
+          :label="$t('recipe.import-original-keywords-as-tags')"
+        />
+        <v-checkbox
+          v-model="stayInEditMode"
+          hide-details
+          :label="$t('recipe.stay-in-edit-mode')"
+        />
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <div style="width: 250px">
+          <BaseButton
+            :disabled="!newRecipeData"
+            large
+            rounded
+            block
+            type="submit"
+            :loading="loading"
+          />
+        </div>
+      </v-card-actions>
+    </div>
+  </v-form>
+</template>
+
+<script lang="ts">
+import type { AxiosResponse } from "axios";
+import { useTagStore } from "~/composables/store/use-tag-store";
+import { useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+import type { VForm } from "~/types/auto-forms";
+
+export default defineNuxtComponent({
+  setup() {
+    const state = reactive({
+      error: false,
+      loading: false,
+      isEditJSON: false,
+    });
+    const $auth = useMealieAuth();
+    const route = useRoute();
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+    const domUrlForm = ref<VForm | null>(null);
+
+    const api = useUserApi();
+    const router = useRouter();
+    const tags = useTagStore();
+
+    const importKeywordsAsTags = computed({
+      get() {
+        return route.query.use_keywords === "1";
+      },
+      set(v: boolean) {
+        router.replace({ query: { ...route.query, use_keywords: v ? "1" : "0" } });
+      },
+    });
+
+    const stayInEditMode = computed({
+      get() {
+        return route.query.edit === "1";
+      },
+      set(v: boolean) {
+        router.replace({ query: { ...route.query, edit: v ? "1" : "0" } });
+      },
+    });
+
+    function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
+      if (response?.status !== 201) {
+        state.error = true;
+        state.loading = false;
+        return;
+      }
+      if (refreshTags) {
+        tags.actions.refresh();
+      }
+
+      router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
+    }
+
+    const newRecipeData = ref<string | object | null>(null);
+
+    function handleIsEditJson() {
+      if (state.isEditJSON) {
+        if (newRecipeData.value) {
+          try {
+            newRecipeData.value = JSON.parse(newRecipeData.value as string);
+          }
+          catch {
+            newRecipeData.value = { data: newRecipeData.value };
+          }
+        }
+        else {
+          newRecipeData.value = {};
+        }
+      }
+      else if (newRecipeData.value && Object.keys(newRecipeData.value).length > 0) {
+        newRecipeData.value = JSON.stringify(newRecipeData.value);
+      }
+      else {
+        newRecipeData.value = null;
+      }
+    }
+    handleIsEditJson();
+
+    async function createFromHtmlOrJson(htmlOrJsonData: string | object | null, importKeywordsAsTags: boolean, stayInEditMode: boolean) {
+      if (!htmlOrJsonData || !domUrlForm.value?.validate()) {
+        return;
+      }
+
+      let dataString;
+      if (typeof htmlOrJsonData === "string") {
+        dataString = htmlOrJsonData;
+      }
+      else {
+        dataString = JSON.stringify(htmlOrJsonData);
+      }
+
+      state.loading = true;
+      const { response } = await api.recipes.createOneByHtmlOrJson(dataString, importKeywordsAsTags);
+      handleResponse(response, stayInEditMode, importKeywordsAsTags);
+    }
+
+    return {
+      domUrlForm,
+      importKeywordsAsTags,
+      stayInEditMode,
+      newRecipeData,
+      handleIsEditJson,
+      createFromHtmlOrJson,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <v-form
+      ref="domUrlForm"
+      @submit.prevent="createRecipe"
+    >
+      <div>
+        <v-card-title class="headline">
+          {{ $t('recipe.create-recipe-from-an-image') }}
+        </v-card-title>
+        <v-card-text>
+          <p>{{ $t('recipe.create-recipe-from-an-image-description') }}</p>
+          <v-container class="pa-0">
+            <v-row>
+              <v-col
+                cols="auto"
+                align-self="center"
+              >
+                <AppButtonUpload
+                  v-if="!uploadedImage"
+                  class="ml-auto"
+                  url="none"
+                  file-name="image"
+                  accept="image/*"
+                  :text="$t('recipe.upload-image')"
+                  :text-btn="false"
+                  :post="false"
+                  @uploaded="uploadImage"
+                />
+                <v-btn
+                  v-if="!!uploadedImage"
+                  color="error"
+                  @click="clearImage"
+                >
+                  <v-icon start>
+                    {{ $globals.icons.close }}
+                  </v-icon>
+                  {{ $t('recipe.remove-image') }}
+                </v-btn>
+              </v-col>
+              <v-spacer />
+            </v-row>
+
+            <div
+              v-if="uploadedImage && uploadedImagePreviewUrl"
+              class="mt-3"
+            >
+              <v-row>
+                <v-col
+                  cols="12"
+                  class="pb-0"
+                >
+                  <v-card-text class="pa-0">
+                    <p class="mb-0">
+                      {{ $t('recipe.crop-and-rotate-the-image') }}
+                    </p>
+                  </v-card-text>
+                </v-col>
+              </v-row>
+              <v-row style="max-width: 600px;">
+                <v-spacer />
+                <v-col cols="12">
+                  <ImageCropper
+                    :img="uploadedImagePreviewUrl"
+                    cropper-height="50vh"
+                    cropper-width="100%"
+                    @save="updateUploadedImage"
+                  />
+                </v-col>
+                <v-spacer />
+              </v-row>
+            </div>
+          </v-container>
+        </v-card-text>
+        <v-card-actions v-if="uploadedImage">
+          <div>
+            <p style="width: 250px">
+              <BaseButton
+                rounded
+                block
+                type="submit"
+                :loading="loading"
+              />
+            </p>
+            <p>
+              <v-checkbox
+                v-model="shouldTranslate"
+                hide-details
+                :label="$t('recipe.should-translate-description')"
+                :disabled="loading"
+              />
+            </p>
+            <p
+              v-if="loading"
+              class="mb-0"
+            >
+              {{ $t('recipe.please-wait-image-procesing') }}
+            </p>
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
+import type { VForm } from "~/types/auto-forms";
+
+export default defineNuxtComponent({
+  setup() {
+    const state = reactive({
+      loading: false,
+    });
+
+    const i18n = useI18n();
+    const api = useUserApi();
+    const route = useRoute();
+    const router = useRouter();
+    const groupSlug = computed(() => route.params.groupSlug || "");
+
+    const domUrlForm = ref<VForm | null>(null);
+    const uploadedImage = ref<Blob | File>();
+    const uploadedImageName = ref<string>("");
+    const uploadedImagePreviewUrl = ref<string>();
+    const shouldTranslate = ref(true);
+
+    function uploadImage(fileObject: File) {
+      uploadedImage.value = fileObject;
+      uploadedImageName.value = fileObject.name;
+      uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
+    }
+
+    function updateUploadedImage(fileObject: Blob) {
+      uploadedImage.value = fileObject;
+      uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
+    }
+
+    function clearImage() {
+      uploadedImage.value = undefined;
+      uploadedImageName.value = "";
+      uploadedImagePreviewUrl.value = undefined;
+    }
+
+    async function createRecipe() {
+      if (!uploadedImage.value) {
+        return;
+      }
+
+      state.loading = true;
+      const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
+      const { data, error } = await api.recipes.createOneFromImage(uploadedImage.value, uploadedImageName.value, translateLanguage);
+      if (error || !data) {
+        alert.error(i18n.t("events.something-went-wrong"));
+        state.loading = false;
+      }
+      else {
+        router.push(`/g/${groupSlug.value}/r/${data}`);
+      };
+    }
+
+    return {
+      ...toRefs(state),
+      domUrlForm,
+      uploadedImage,
+      uploadedImagePreviewUrl,
+      shouldTranslate,
+      uploadImage,
+      updateUploadedImage,
+      clearImage,
+      createRecipe,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <div />
+</template>
+
+<script lang="ts">
+export default defineNuxtComponent({
+  setup() {
+    const router = useRouter();
+    onMounted(() => {
+      // Force redirect to first valid page
+      router.replace("/r/create/url");
+    });
+    return {};
+  },
+});
+</script>

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

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <v-card-title class="headline">
+      {{ $t('recipe.create-recipe') }}
+    </v-card-title>
+    <v-card-text>
+      {{ $t('recipe.create-a-recipe-by-providing-the-name-all-recipes-must-have-unique-names') }}
+      <v-form
+        ref="domCreateByName"
+        @submit.prevent
+      >
+        <v-text-field
+          v-model="newRecipeName"
+          :label="$t('recipe.recipe-name')"
+          :prepend-inner-icon="$globals.icons.primary"
+          validate-on="blur"
+          autofocus
+          variant="solo-filled"
+          clearable
+          class="rounded-lg mt-2"
+          color="primary"
+          rounded
+          :rules="[validators.required]"
+          :hint="$t('recipe.new-recipe-names-must-be-unique')"
+          persistent-hint
+          @keyup.enter="createByName(newRecipeName)"
+        />
+      </v-form>
+    </v-card-text>
+    <v-card-actions class="justify-center">
+      <div style="width: 250px">
+        <BaseButton
+          :disabled="newRecipeName.trim() === ''"
+          rounded
+          block
+          :loading="loading"
+          @click="createByName(newRecipeName)"
+        />
+      </div>
+    </v-card-actions>
+  </div>
+</template>
+
+<script lang="ts">
+import type { AxiosResponse } from "axios";
+import { useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+import type { VForm } from "~/types/auto-forms";
+
+export default defineNuxtComponent({
+  setup() {
+    const state = reactive({
+      error: false,
+      loading: false,
+    });
+    const $auth = useMealieAuth();
+    const route = useRoute();
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+    const api = useUserApi();
+    const router = useRouter();
+
+    function handleResponse(response: AxiosResponse<string> | null, edit = false) {
+      if (response?.status !== 201) {
+        state.error = true;
+        state.loading = false;
+        return;
+      }
+      router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
+    }
+
+    const newRecipeName = ref("");
+    const domCreateByName = ref<VForm | null>(null);
+
+    async function createByName(name: string) {
+      if (!domCreateByName.value?.validate() || name === "") {
+        return;
+      }
+      const { response } = await api.recipes.createOne({ name });
+      handleResponse(response as any, true);
+    }
+    return {
+      domCreateByName,
+      newRecipeName,
+      createByName,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <v-form
+      ref="domUrlForm"
+      @submit.prevent="createByUrl(recipeUrl, importKeywordsAsTags, stayInEditMode)"
+    >
+      <div>
+        <v-card-title class="headline">
+          {{ $t('recipe.scrape-recipe') }}
+        </v-card-title>
+        <v-card-text>
+          <p>{{ $t('recipe.scrape-recipe-description') }}</p>
+          <p>
+            {{ $t('recipe.scrape-recipe-have-a-lot-of-recipes') }}
+            <a :href="bulkImporterTarget">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</a>.
+            <br>
+            {{ $t('recipe.scrape-recipe-have-raw-html-or-json-data') }}
+            <a :href="htmlOrJsonImporterTarget">{{ $t('recipe.scrape-recipe-you-can-import-from-raw-data-directly') }}</a>.
+          </p>
+          <v-text-field
+            v-model="recipeUrl"
+            :label="$t('new-recipe.recipe-url')"
+            :prepend-inner-icon="$globals.icons.link"
+            validate-on="blur"
+            autofocus
+            variant="solo-filled"
+            clearable
+            class="rounded-lg mt-2"
+            rounded
+            :rules="[validators.url]"
+            :hint="$t('new-recipe.url-form-hint')"
+            persistent-hint
+          />
+        </v-card-text>
+        <v-checkbox
+          v-model="importKeywordsAsTags"
+          color="primary"
+          hide-details
+          :label="$t('recipe.import-original-keywords-as-tags')"
+        />
+        <v-checkbox
+          v-model="stayInEditMode"
+          color="primary"
+          hide-details
+          :label="$t('recipe.stay-in-edit-mode')"
+        />
+        <v-card-actions class="justify-center">
+          <div style="width: 250px">
+            <BaseButton
+              :disabled="recipeUrl === null"
+              rounded
+              block
+              type="submit"
+              :loading="loading"
+            />
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+    <v-expand-transition>
+      <v-alert
+        v-if="error"
+        color="error"
+        class="mt-6 white--text"
+      >
+        <v-card-title class="ma-0 pa-0">
+          <v-icon
+            start
+            color="white"
+            size="x-large"
+          >
+            {{ $globals.icons.robot }}
+          </v-icon>
+          {{ $t("new-recipe.error-title") }}
+        </v-card-title>
+        <v-divider class="my-3 mx-2" />
+
+        <p>
+          {{ $t("new-recipe.error-details") }}
+        </p>
+        <div class="d-flex row justify-space-around my-3 force-white">
+          <a
+            class="dark"
+            href="https://developers.google.com/search/docs/data-types/recipe"
+            target="_blank"
+            rel="noreferrer nofollow"
+          >
+            {{ $t("new-recipe.google-ld-json-info") }}
+          </a>
+          <a
+            href="https://github.com/hay-kot/mealie/issues"
+            target="_blank"
+            rel="noreferrer nofollow"
+          >
+            {{ $t("new-recipe.github-issues") }}
+          </a>
+          <a
+            href="https://schema.org/Recipe"
+            target="_blank"
+            rel="noreferrer nofollow"
+          >
+            {{ $t("new-recipe.recipe-markup-specification") }}
+          </a>
+        </div>
+      </v-alert>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script lang="ts">
+import type { AxiosResponse } from "axios";
+import { useUserApi } from "~/composables/api";
+import { useTagStore } from "~/composables/store/use-tag-store";
+import { validators } from "~/composables/use-validators";
+import type { VForm } from "~/types/auto-forms";
+
+export default defineNuxtComponent({
+  setup() {
+    definePageMeta({
+      key: route => route.path,
+    });
+    const state = reactive({
+      error: false,
+      loading: false,
+    });
+
+    const $auth = useMealieAuth();
+    const api = useUserApi();
+    const route = useRoute();
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+    const router = useRouter();
+    const tags = useTagStore();
+
+    const bulkImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/bulk`);
+    const htmlOrJsonImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/html`);
+
+    function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
+      if (response?.status !== 201) {
+        state.error = true;
+        state.loading = false;
+        return;
+      }
+      if (refreshTags) {
+        tags.actions.refresh();
+      }
+
+      // we clear the query params first so if the user hits back, they don't re-import the recipe
+      router.replace({ query: {} }).then(
+        () => router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`),
+      );
+    }
+
+    const recipeUrl = computed({
+      set(recipe_import_url: string | null) {
+        if (recipe_import_url !== null) {
+          recipe_import_url = recipe_import_url.trim();
+          router.replace({ query: { ...route.query, recipe_import_url } });
+        }
+      },
+      get() {
+        return route.query.recipe_import_url as string | null;
+      },
+    });
+
+    const importKeywordsAsTags = computed({
+      get() {
+        return route.query.use_keywords === "1";
+      },
+      set(v: boolean) {
+        router.replace({ query: { ...route.query, use_keywords: v ? "1" : "0" } });
+      },
+    });
+
+    const stayInEditMode = computed({
+      get() {
+        return route.query.edit === "1";
+      },
+      set(v: boolean) {
+        router.replace({ query: { ...route.query, edit: v ? "1" : "0" } });
+      },
+    });
+
+    onMounted(() => {
+      if (!recipeUrl.value) {
+        return;
+      }
+
+      if (recipeUrl.value.includes("https")) {
+        createByUrl(recipeUrl.value, importKeywordsAsTags.value, stayInEditMode.value);
+      }
+    });
+
+    const domUrlForm = ref<VForm | null>(null);
+
+    async function createByUrl(url: string | null, importKeywordsAsTags: boolean, stayInEditMode: boolean) {
+      if (url === null) {
+        return;
+      }
+
+      if (!domUrlForm.value?.validate() || url === "") {
+        console.log("Invalid URL", url);
+        return;
+      }
+      state.loading = true;
+      const { response } = await api.recipes.createOneByUrl(url, importKeywordsAsTags);
+      handleResponse(response, stayInEditMode, importKeywordsAsTags);
+    }
+
+    return {
+      bulkImporterTarget,
+      htmlOrJsonImporterTarget,
+      recipeUrl,
+      importKeywordsAsTags,
+      stayInEditMode,
+      domUrlForm,
+      createByUrl,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>
+
+<style>
+.force-white > a {
+  color: white !important;
+}
+</style>

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

@@ -0,0 +1,89 @@
+<template>
+  <v-form>
+    <div>
+      <v-card-title class="headline">
+        {{ $t('recipe.import-from-zip') }}
+      </v-card-title>
+      <v-card-text>
+        {{ $t('recipe.import-from-zip-description') }}
+        <v-file-input
+          v-model="newRecipeZip"
+          accept=".zip"
+          label=".zip"
+          variant="solo-filled"
+          clearable
+          class="rounded-lg mt-2"
+          rounded
+          truncate-length="100"
+          :hint="$t('recipe.zip-files-must-have-been-exported-from-mealie')"
+          persistent-hint
+          prepend-icon=""
+          :prepend-inner-icon="$globals.icons.zip"
+        />
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <div style="width: 250px">
+          <BaseButton
+            :disabled="newRecipeZip === null"
+            large
+            rounded
+            block
+            :loading="loading"
+            @click="createByZip"
+          />
+        </div>
+      </v-card-actions>
+    </div>
+  </v-form>
+</template>
+
+<script lang="ts">
+import type { AxiosResponse } from "axios";
+import { useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+
+export default defineNuxtComponent({
+  setup() {
+    const state = reactive({
+      error: false,
+      loading: false,
+    });
+    const $auth = useMealieAuth();
+    const route = useRoute();
+    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+    const api = useUserApi();
+    const router = useRouter();
+
+    function handleResponse(response: AxiosResponse<string> | null, edit = false) {
+      if (response?.status !== 201) {
+        state.error = true;
+        state.loading = false;
+        return;
+      }
+      router.push(`/g/${groupSlug.value}/r/${response.data}?edit=${edit.toString()}`);
+    }
+
+    const newRecipeZip = ref<File | null>(null);
+    const newRecipeZipFileName = "archive";
+
+    async function createByZip() {
+      if (!newRecipeZip.value) {
+        return;
+      }
+      const formData = new FormData();
+      formData.append(newRecipeZipFileName, newRecipeZip.value);
+
+      const { response } = await api.upload.file("/api/recipes/create/zip", formData);
+      handleResponse(response);
+    }
+
+    return {
+      newRecipeZip,
+      createByZip,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>