reorganize all frontend items

frontend/pages/index.vue

@@ -1,16 +1,28 @@
 <template>
-  <div></div>
+  <v-container>
+    <RecipeCardSection :recipes="recipes"></RecipeCardSection>
+  </v-container>
 </template>
   
   <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
+import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
+import { useApi } from "~/composables/use-api";
+import { Recipe } from "~/types/api-types/admin";
 
 export default defineComponent({
+  components: { RecipeCardSection },
   setup() {
-    return {};
+    const api = useApi();
+
+    const recipes = ref<Recipe[] | null>([]);
+    onMounted(async () => {
+      const { data } = await api.recipes.getAll();
+      recipes.value = data;
+    });
+
+    return { api, recipes };
   },
 });
 </script>
-  
-  <style scoped>
-</style>
+