Finish to setup data access

README.md

@@ -1,7 +1,11 @@
 The project is based on [Kirby CMS](https://getkirby.com), [Vite](https://vitejs.dev/) + [Vue](https://fr.vuejs.org/) and [Pinia](https://pinia.vuejs.org/) as a state manager.
 Vue is used following the composition API approach.
 
-## First setup :
+# Development
+
+## Development environment
+
+### First setup :
 
 - **From the `/public` directory**, install the Kirby dependencies : `composer install`
 - **From the root directory**, install the Node dependencies : `npm install`
@@ -15,7 +19,7 @@ VITE_USERNAME=mail@example.com
 VITE_PASSWORD=your-private-password
 ```
 
-## Development environment
+### Servers
 
 - **From the `/public` directory**, launch the PHP server : `php -S localhost:8888 kirby/router.php`
 - In another terminal tab, **from the root directory**, launch the Vite server : `vite`

public/site/controllers/site.php

@@ -0,0 +1,9 @@
+<?php
+
+return function ($page) {
+  $data = $page->toArray();
+  $data['template'] = (string) $page->template();
+  return [
+    'genericData' => $data,
+  ];
+};

public/site/snippets/footer.php

@@ -1,8 +1,3 @@
-    <script>
-      const kirbyData = {
-        pageUri: '<?= $page->uri() ?>',
-        pageTemplate: '<?= $page->template() ?>',
-      }
-    </script>
+  
 </body>
 </html>

public/site/snippets/generic-template.php

@@ -0,0 +1,3 @@
+<?php snippet('header') ?>
+  <div id="app"></div>
+<?php snippet('footer') ?>

public/site/templates/home.json.php

@@ -0,0 +1,7 @@
+<?php
+
+$specificData = [];
+
+$data = array_merge($genericData, $specificData);
+
+echo json_encode($data);

public/site/templates/home.php

@@ -1,3 +1 @@
-<?php snippet('header') ?>
-  <div id="app"></div>
-<?php snippet('footer') ?>
+<?php snippet('generic-template') ?>

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>