recipePage use v-model instead of prop and turn into script setup

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -149,7 +149,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { invoke, until } from "@vueuse/core";
 import RecipeIngredients from "../RecipeIngredients.vue";
 import RecipePageEditorToolbar from "./RecipePageParts/RecipePageEditorToolbar.vue";
@@ -186,30 +186,8 @@ const EDITOR_OPTIONS = {
   mainMenuBar: false,
 };
 
-export default defineNuxtComponent({
-  components: {
-    RecipePageHeader,
-    RecipePrintContainer,
-    RecipePageComments,
-    RecipePageInfoEditor,
-    RecipePageEditorToolbar,
-    RecipePageIngredientEditor,
-    RecipePageOrganizers,
-    RecipePageScale,
-    RecipePageIngredientToolsView,
-    RecipeDialogBulkAdd,
-    RecipeNotes,
-    RecipePageInstructions,
-    RecipePageFooter,
-    RecipeIngredients,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-  },
-  setup(props) {
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
+
 const { $vuetify } = useNuxtApp();
 const i18n = useI18n();
 const $auth = useMealieAuth();
@@ -221,11 +199,11 @@ export default defineNuxtComponent({
 const router = useRouter();
 const api = useUserApi();
 const { pageMode, editMode, setMode, isEditForm, isEditJSON, isCookMode, isEditMode, toggleCookMode }
-      = usePageState(props.recipe.slug);
+  = usePageState(recipe.value.slug);
 const { deactivateNavigationWarning } = useNavigationWarning();
 const notLinkedIngredients = computed(() => {
-      return props.recipe.recipeIngredient.filter((ingredient) => {
-        return !props.recipe.recipeInstructions.some(step =>
+  return recipe.value.recipeIngredient.filter((ingredient) => {
+    return !recipe.value.recipeInstructions.some(step =>
       step.ingredientReferences?.map(ref => ref.referenceId).includes(ingredient.referenceId),
     );
   });
@@ -239,27 +217,27 @@ export default defineNuxtComponent({
 const originalRecipe = ref<Recipe | null>(null);
 
 invoke(async () => {
-      await until(props.recipe).not.toBeNull();
-      originalRecipe.value = deepCopy(props.recipe);
+  await until(recipe.value).not.toBeNull();
+  originalRecipe.value = deepCopy(recipe.value);
 });
 
 onUnmounted(async () => {
-      const isSame = JSON.stringify(props.recipe) === JSON.stringify(originalRecipe.value);
-      if (isEditMode.value && !isSame && props.recipe?.slug !== undefined) {
+  const isSame = JSON.stringify(recipe.value) === JSON.stringify(originalRecipe.value);
+  if (isEditMode.value && !isSame && recipe.value?.slug !== undefined) {
     const save = window.confirm(i18n.t("general.unsaved-changes"));
 
     if (save) {
-          await api.recipes.updateOne(props.recipe.slug, props.recipe);
+      await api.recipes.updateOne(recipe.value.slug, recipe.value);
     }
   }
   deactivateNavigationWarning();
   toggleCookMode();
 
-      clearPageState(props.recipe.slug || "");
+  clearPageState(recipe.value.slug || "");
   console.debug("reset RecipePage state during unmount");
 });
 const hasLinkedIngredients = computed(() => {
-      return props.recipe.recipeInstructions.some(
+  return recipe.value.recipeInstructions.some(
     step => step.ingredientReferences && step.ingredientReferences.length > 0,
   );
 });
@@ -282,7 +260,7 @@ export default defineNuxtComponent({
  */
 
 async function saveRecipe() {
-      const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
+  const { data } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
   setMode(PageMode.VIEW);
   if (data?.slug) {
     router.push(`/g/${groupSlug.value}/r/` + data.slug);
@@ -290,7 +268,7 @@ export default defineNuxtComponent({
 }
 
 async function deleteRecipe() {
-      const { data } = await api.recipes.deleteOne(props.recipe.slug);
+  const { data } = await api.recipes.deleteOne(recipe.value.slug);
   if (data?.slug) {
     router.push(`/g/${groupSlug.value}`);
   }
@@ -300,7 +278,7 @@ export default defineNuxtComponent({
  * View Preferences
  */
 const landscape = computed(() => {
-      const preferLandscape = props.recipe.settings.landscapeView;
+  const preferLandscape = recipe.value.settings.landscapeView;
   const smallScreen = !$vuetify.display.smAndUp.value;
 
   if (preferLandscape) {
@@ -319,7 +297,7 @@ export default defineNuxtComponent({
  */
 
 function addStep(steps: Array<string> | null = null) {
-      if (!props.recipe.recipeInstructions) {
+  if (!recipe.value.recipeInstructions) {
     return;
   }
 
@@ -328,10 +306,10 @@ export default defineNuxtComponent({
       return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
     });
 
-        props.recipe.recipeInstructions.push(...cleanedSteps);
+    recipe.value.recipeInstructions.push(...cleanedSteps);
   }
   else {
-        props.recipe.recipeInstructions.push({
+    recipe.value.recipeInstructions.push({
       id: uuid4(),
       text: "",
       title: "",
@@ -357,32 +335,10 @@ export default defineNuxtComponent({
   router.push(`/g/${groupSlug.value}?${itemType}=${item.id}`);
 }
 
-    return {
-      user,
-      isOwnGroup,
-      api,
-      scale: ref(1),
-      EDITOR_OPTIONS,
-      landscape,
+const scale = ref(1);
 
-      pageMode,
-      editMode,
-      PageMode,
-      EditorMode,
-      isEditMode,
-      isEditForm,
-      isEditJSON,
-      isCookMode,
-      toggleCookMode,
-      saveRecipe,
-      deleteRecipe,
-      addStep,
-      hasLinkedIngredients,
-      notLinkedIngredients,
-      chipClicked,
-    };
-  },
-});
+// expose to template
+// (all variables used in template are top-level in <script setup>)
 </script>
 
 <style lang="css">

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

@@ -2,7 +2,7 @@
   <div>
     <RecipePage
       v-if="recipe"
-      :recipe="recipe"
+      v-model="recipe"
     />
   </div>
 </template>

frontend/pages/g/[groupSlug]/shared/r/[id].vue

@@ -3,7 +3,7 @@
     <client-only>
       <RecipePage
         v-if="recipe"
-        :recipe="recipe"
+        v-model="recipe"
       />
     </client-only>
   </div>