Recipe Card Image

frontend/components/Domain/Recipe/RecipeCardImage.vue

@@ -28,47 +28,32 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useStaticRoutes, useUserApi } from "~/composables/api";
+<script setup lang="ts">
+import { useStaticRoutes } from "~/composables/api";
 
-export default defineNuxtComponent({
-  props: {
-    tiny: {
-      type: Boolean,
-      default: null,
-    },
-    small: {
-      type: Boolean,
-      default: null,
-    },
-    large: {
-      type: Boolean,
-      default: null,
-    },
-    iconSize: {
-      type: [Number, String],
-      default: 100,
-    },
-    slug: {
-      type: String,
-      default: null,
-    },
-    recipeId: {
-      type: String,
-      required: true,
-    },
-    imageVersion: {
-      type: String,
-      default: null,
-    },
-    height: {
-      type: [Number, String],
-      default: "100%",
-    },
-  },
-  emits: ["click"],
-  setup(props) {
-    const api = useUserApi();
+interface Props {
+  tiny?: boolean | null;
+  small?: boolean | null;
+  large?: boolean | null;
+  iconSize?: number | string;
+  slug?: string | null;
+  recipeId: string;
+  imageVersion?: string | null;
+  height?: number | string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  tiny: null,
+  small: null,
+  large: null,
+  iconSize: 100,
+  slug: null,
+  imageVersion: null,
+  height: "100%",
+});
+
+defineEmits<{
+  click: [];
+}>();
 
 const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
 
@@ -97,15 +82,6 @@ export default defineNuxtComponent({
       return recipeImage(recipeId, props.imageVersion);
   }
 }
-
-    return {
-      api,
-      fallBackImage,
-      imageSize,
-      getImage,
-    };
-  },
-});
 </script>
 
 <style scoped>