diff --git a/frontend/components/Domain/Recipe/RecipeIngredientHtml.vue b/frontend/components/Domain/Recipe/RecipeIngredientHtml.vue
index 8718833e0..62d09fad5 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientHtml.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientHtml.vue
@@ -3,21 +3,13 @@
   <div v-html="safeMarkup" />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { sanitizeIngredientHTML } from "~/composables/recipes/use-recipe-ingredients";
 
-export default defineNuxtComponent({
-  props: {
-    markup: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
-    return {
-      safeMarkup,
-    };
-  },
-});
+interface Props {
+  markup: string;
+}
+const props = defineProps<Props>();
+
+const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
 </script>