fix recipe static routes

frontend/components/Domain/Recipe/RecipeCardImage.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { useStaticRoutes } from "~/composables/api";
 import { useApiSingleton } from "~/composables/use-api";
 export default {
   props: {
@@ -53,7 +54,9 @@ export default {
   setup() {
     const api = useApiSingleton();
 
-    return { api };
+    const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
+
+    return { api, recipeImage, recipeSmallImage, recipeTinyImage };
   },
   data() {
     return {
@@ -77,11 +80,11 @@ export default {
     getImage(slug) {
       switch (this.imageSize) {
         case "tiny":
-          return this.api.recipes.recipeTinyImage(slug, this.imageVersion);
+          return this.recipeTinyImage(slug, this.imageVersion);
         case "small":
-          return this.api.recipes.recipeSmallImage(slug, this.imageVersion);
+          return this.recipeSmallImage(slug, this.imageVersion);
         case "large":
-          return this.api.recipes.recipeImage(slug, this.imageVersion);
+          return this.recipeImage(slug, this.imageVersion);
       }
     },
   },

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="recipes">
+  <div>
     <v-app-bar v-if="!disableToolbar" color="transparent" flat class="mt-n1 flex-sm-wrap rounded">
       <v-icon v-if="title" large left>
         {{ displayTitleIcon }}
@@ -139,7 +139,7 @@ export default {
     },
     recipes: {
       type: Array,
-      required: true,
+      default: () => [],
     },
   },
   data() {