Recipe Yield

frontend/components/Domain/Recipe/RecipeYield.vue

@@ -24,30 +24,23 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import DOMPurify from "dompurify";
 import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
 
-export default defineNuxtComponent({
-  props: {
-    yieldQuantity: {
-      type: Number,
-      default: 0,
-    },
-    yieldText: {
-      type: String,
-      default: "",
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-    color: {
-      type: String,
-      default: "accent custom-transparent",
-    },
-  },
-  setup(props) {
+interface Props {
+  yieldQuantity?: number;
+  yieldText?: string;
+  scale?: number;
+  color?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  yieldQuantity: 0,
+  yieldText: "",
+  scale: 1,
+  color: "accent custom-transparent",
+});
+
 function sanitizeHTML(rawHtml: string) {
   return DOMPurify.sanitize(rawHtml, {
     USE_PROFILES: { html: true },
@@ -70,10 +63,4 @@ export default defineNuxtComponent({
 
   return sanitizeHTML(components.join(" "));
 });
-
-    return {
-      yieldDisplay,
-    };
-  },
-});
 </script>