Start fetchdata kql

src/App.vue

@@ -1,35 +1,23 @@
-<script>
-fetchData();
+<script setup>
+import Home from "./views/Home.vue";
+import { useApiStore } from "./stores/api";
 
-function fetchData() {
-  const api = "/api/query";
+const templates = {
+  home: {
+    component: Home,
+    query: {
+      title: true,
+    },
+  },
+};
 
-  const username = import.meta.env.VITE_USERNAME;
-  const password = "Ap&216991";
+const api = useApiStore();
+const pageTemplate = kirbyData.pageTemplate;
+const pageUri = kirbyData.pageUri;
 
-  const token = btoa(`${username}:${password}`);
-
-  const headers = {
-    Authorization: `Basic ${token}`,
-  };
-
-  const request = {
-    method: "post",
-    body: JSON.stringify({
-      query: "site.title",
-    }),
-    headers,
-  };
-
-  fetch(api, request)
-    .then((response) => response.json())
-    .then((response) => {
-      console.log(response);
-    })
-    .catch((error) => {
-      console.log(error);
-    });
-}
+api.fetchData();
 </script>
 
-<template>test</template>
+<template>
+  <component :is="templates[pageTemplate].component" />
+</template>

src/main.js

@@ -6,4 +6,5 @@ import { createPinia } from "pinia";
 const app = createApp(App);
 const pinia = createPinia();
 
-app.use(pinia).mount("#app");
+app.use(pinia);
+app.mount("#app");

src/stores/api.js

@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+
+export const useApiStore = defineStore("counter", () => {
+  function fetchData() {
+    const api = "/api/query";
+
+    const username = import.meta.env.VITE_USERNAME;
+    const password = import.meta.env.VITE_PASSWORD;
+
+    const token = btoa(`${username}:${password}`);
+
+    const headers = {
+      Authorization: `Basic ${token}`,
+    };
+
+    const request = {
+      method: "post",
+      body: JSON.stringify({
+        query: `page('home')`,
+        select: {
+          testImages: {
+            query: "page.testImages.toFiles",
+            select: {
+              url: true,
+            },
+          },
+          blocks: {
+            query: "page.testBlocks.toBlocks",
+          },
+        },
+      }),
+      headers,
+    };
+
+    fetch(api, request)
+      .then((response) => response.json())
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+
+  return { fetchData };
+});

src/views/Home.vue

@@ -0,0 +1,3 @@
+<script setup></script>
+<template></template>
+<style scoped></style>