Generated API from petstore.

Author: Przemyslaw Brzosko

orval.config.ts

@@ -14,7 +14,7 @@ function modifyRecursive(obj: object, fn: (obj: object) => boolean) {
 export default defineConfig({
   swapi: {
     input: {
-      target: "../../SwWeb2/api.json",
+      target: "src/petstore.yaml",
       override: {
         transformer: (api) => {
           modifyRecursive(api, (value) => {

package-lock.json

@@ -10,8 +10,10 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@tanstack/vue-query": "^5.51.9",
     "@types/node": "^20.11.27",
-    "orval": "^7.0.0"
+    "orval": "^7.0.0",
+    "typescript": "^5.5.4"
   },
   "dependencies": {
     "vue": "^3.4.21"

package.json

@@ -1,18 +1,9 @@
 <script lang="ts" setup>
-import {ref} from "vue";
+import {useShowPetById} from "./api/pets/pets";
 
-const submitted = ref(false);
+const {data: pet, error: petError} = useShowPetById("100");
 </script>
 <template>
-  <div v-if="submitted">
-    Form Submitted
-    <button @click="submitted = false">Reset</button>
-  </div>
-  <form :style="{display: 'flex', flexDirection: 'column'}" @submit.prevent="submitted = true" v-else>
-    <label for="username">Username</label>
-    <input id="username" type="text">
-    <label for="password">Password</label>
-    <input id="password" type="password">
-    <button type="submit">Login</button>
-  </form>
+  <div v-if="petError">{{petError}}</div>
+  <div v-else>{{pet}}</div>
 </template>