some basic views

vue3/src/pages/RecipeSearchPage.vue

@@ -1,13 +1,35 @@
 <template>
     <h2>Search</h2>
-    <v-input placeholde="Search"></v-input>
+    <v-text-field placeholde="Search"></v-text-field>
+
+    <v-row>
+        <v-col cols="12" sm="3" md="4" v-for="r in recipes" :key="r.id">
+            <RecipeCardComponent :recipe="r"></RecipeCardComponent>
+        </v-col>
+    </v-row>
+
 </template>
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+import {ApiApi, Recipe} from "@/openapi";
+import KeywordsComponent from "@/components/display/KeywordsComponent.vue";
+import RecipeCardComponent from "@/components/display/RecipeCardComponent.vue";
 
 export default defineComponent({
-    name: "RecipeSearchPage"
+    name: "RecipeSearchPage",
+    components: {RecipeCardComponent, KeywordsComponent},
+    data() {
+        return {
+            recipes: [] as Recipe[]
+        }
+    },
+    mounted() {
+        const api = new ApiApi()
+        api.listRecipes().then(r => {
+            this.recipes = r.results
+        })
+    }
 })
 </script>
 

vue3/src/pages/RecipeViewPage.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-img max-height="15vh" :src="recipe.image"></v-img>
+    <h3>{{ recipe.name }}</h3>
+    {{ recipe.description }}
+
+    {{recipe}}
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import {ApiApi, Recipe} from "@/openapi";
+
+export default defineComponent({
+    name: "RecipeSearchPage",
+    components: {},
+    props: {
+        id: Number
+    },
+    data() {
+        return {
+            recipe: {} as Recipe
+        }
+    },
+    mounted() {
+        const api = new ApiApi()
+        api.retrieveRecipe({id: this.id}).then(r => {
+            this.recipe = r
+        })
+    }
+})
+</script>
+
+<style scoped>
+
+</style>