diff --git a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
index 0c89f50c1..bdf2604b6 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
@@ -28,34 +28,22 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { RecipeIngredient } from "~/lib/api/types/household";
 import { useParsedIngredientText } from "~/composables/recipes";
 
-export default defineNuxtComponent({
-  props: {
-    ingredient: {
-      type: Object as () => RecipeIngredient,
-      required: true,
-    },
-    disableAmount: {
-      type: Boolean,
-      default: false,
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-  },
-  setup(props) {
-    const parsedIng = computed(() => {
-      return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
-    });
+interface Props {
+  ingredient: RecipeIngredient;
+  disableAmount?: boolean;
+  scale?: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+  disableAmount: false,
+  scale: 1,
+});
 
-    return {
-      parsedIng,
-    };
-  },
+const parsedIng = computed(() => {
+  return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
 });
 </script>