Init OpenAPI

src/App.vue

@@ -13,7 +13,7 @@
         </div>
     </div>
 
-    <main>
+    <main class="w-dvw">
         <RouterView/>
     </main>
 </template>

src/components.d.ts

@@ -8,7 +8,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    DeckIcon: typeof import('./components/DeckIcon.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    Image: typeof import('primevue/image')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VirtualScroller: typeof import('primevue/virtualscroller')['default']

src/main.ts

@@ -4,8 +4,9 @@ import App from './App.vue'
 import PrimeVue from 'primevue/config';
 import Aura from '@primeuix/themes/aura';
 import {createMemoryHistory, createRouter, type Router, type RouteRecordRaw} from "vue-router";
-import {DeckService, DeckServiceFactory} from "./api/openpi";
 import HomeView from "./views/HomeView.vue";
+import {DeckService} from "./api/openapi";
+import axios from "axios";
 
 const routes: RouteRecordRaw[] = [
   {path: '/', component: HomeView}
@@ -16,12 +17,10 @@ const router: Router = createRouter({
   routes
 })
 
-const deckService: DeckService = DeckServiceFactory({
-
-})
-
+export const axiosInstance = axios.create()
 export const DeckServiceKey = Symbol("deckServiceKey")
 
+const deckService: DeckService = new DeckService(undefined, "http://localhost:8080", axiosInstance)
 
 const app = createApp(App);
 app.use(PrimeVue, {

src/views/HomeView.vue

@@ -1,16 +1,32 @@
-<script setup lang="ts">
-
-import {DeckService} from "../api/openpi";
-
-const deckService: DeckService = inject(Deck);
-</script>
-
 <template>
-  <div>
-    <div v></div>
+  <div class="flex w-full justify-end">
+    <div class="flex flex-col" v-for="deck of decks">
+      <Image
+          src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f1ea70e0-6b84-41e0-945a-9388d618e4a0/dc0ha2k-570434cb-39a2-41c8-8bc0-d6e0333a4f28.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2YxZWE3MGUwLTZiODQtNDFlMC05NDVhLTkzODhkNjE4ZTRhMFwvZGMwaGEyay01NzA0MzRjYi0zOWEyLTQxYzgtOGJjMC1kNmUwMzMzYTRmMjgucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.pUHo0NNlqIO7VPFnb-GFSzQX4e1xmI5ArXJNZBCiIwg"
+          alt="Image"
+          width="250"
+          preview
+      />
+      hi! {{ deck.name}}
+    </div>
   </div>
 </template>
 
+<script setup lang="ts">
+
+import {inject, onMounted, ref, type Ref} from "vue";
+import {DeckServiceKey} from "../main.ts";
+import {type Deck, DeckService} from "../api/openapi";
+
+const deckService: DeckService = inject(DeckServiceKey) as DeckService;
+
+const decks: Ref<Deck[]> = ref([]);
+
+onMounted(async () => {
+  decks.value = (await deckService.getDecks()).data.content
+})
+</script>
+
 <style scoped>
 
 </style>