Recipe Ingredients and Tools

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

@@ -36,7 +36,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { useToolStore } from "~/composables/store";
@@ -48,25 +48,15 @@ interface RecipeToolWithOnHand extends RecipeTool {
   onHand: boolean;
 }
 
-export default defineNuxtComponent({
-  components: {
-    RecipeIngredients,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-    scale: {
-      type: Number,
-      required: true,
-    },
-    isCookMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
+interface Props {
+  recipe: NoUndefinedField<Recipe>;
+  scale: number;
+  isCookMode?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  isCookMode: false,
+});
+
 const { isOwnGroup } = useLoggedInState();
 
 const toolStore = isOwnGroup.value ? useToolStore() : null;
@@ -106,13 +96,4 @@ export default defineNuxtComponent({
     console.log("no user, skipping server update");
   }
 }
-
-    return {
-      toolStore,
-      recipeTools,
-      isEditMode,
-      updateTool,
-    };
-  },
-});
 </script>