Recipe Header Image

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

@@ -12,25 +12,21 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useStaticRoutes, useUserApi } from "~/composables/api";
 import type { HouseholdSummary } from "~/lib/api/types/household";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import type { Recipe } from "~/lib/api/types/recipe";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 
-export default defineNuxtComponent({
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-    maxWidth: {
-      type: String,
-      default: undefined,
-    },
-  },
-  setup(props) {
+interface Props {
+  recipe: NoUndefinedField<Recipe>;
+  maxWidth?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  maxWidth: undefined,
+});
+
 const { $vuetify } = useNuxtApp();
 const { recipeImage } = useStaticRoutes();
 const { imageKey } = usePageState(props.recipe.slug);
@@ -59,13 +55,4 @@ export default defineNuxtComponent({
     hideImage.value = false;
   },
 );
-
-    return {
-      recipeImageUrl,
-      imageKey,
-      hideImage,
-      imageHeight,
-    };
-  },
-});
 </script>