Finish to setup data access

src/App.vue

@@ -1,23 +1,17 @@
-<script setup>
-import Home from "./views/Home.vue";
-import { useApiStore } from "./stores/api";
+<template>
+  <component :is="components[data.template]" v-if="data" :data="data" />
+</template>
 
-const templates = {
-  home: {
-    component: Home,
-    query: {
-      title: true,
-    },
-  },
+<script setup>
+import home from "./views/Home.vue";
+import { useApiStore } from "./stores/api";
+import { ref } from "vue";
+
+const components = {
+  home,
 };
 
+const data = ref(null);
 const api = useApiStore();
-const pageTemplate = kirbyData.pageTemplate;
-const pageUri = kirbyData.pageUri;
-
-api.fetchData();
+api.fetchPageData().then((res) => (data.value = res));
 </script>
-
-<template>
-  <component :is="templates[pageTemplate].component" />
-</template>

src/stores/api.js

@@ -1,7 +1,29 @@
 import { defineStore } from "pinia";
 
 export const useApiStore = defineStore("counter", () => {
-  function fetchData() {
+  async function fetchPageData() {
+    const isHomePage = window.location.pathname === "/";
+    const url = isHomePage
+      ? `${window.location.href}home.json`
+      : `${window.location.href}.json`;
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error(
+        "Une erreur s'est produite lors de la récupération des données :",
+        error
+      );
+      throw error;
+    }
+  }
+
+  function fetchDataThroughKQL() {
     const api = "/api/query";
 
     const username = import.meta.env.VITE_USERNAME;
@@ -42,5 +64,5 @@ export const useApiStore = defineStore("counter", () => {
       });
   }
 
-  return { fetchData };
+  return { fetchDataThroughKQL, fetchPageData };
 });

src/views/Home.vue

@@ -1,3 +1,8 @@
-<script setup></script>
-<template></template>
-<style scoped></style>
+<template>
+  <h1>{{ data.content.title }}</h1>
+</template>
+<script setup>
+const { data } = defineProps({
+  data: Object,
+});
+</script>