merge

package-lock.json

@@ -13,7 +13,8 @@
         "pinia": "^2.1.7",
         "primevue": "^4.0.6",
         "slugify": "^1.6.6",
-        "vue": "^3.5.6"
+        "vue": "^3.5.6",
+        "vue-router": "^4.4.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.1.3",
@@ -760,9 +761,9 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
-      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
     },
     "node_modules/@vue/reactivity": {
       "version": "3.5.6",
@@ -1146,6 +1147,20 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-router": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
+      "integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   }
 }

package.json

@@ -14,7 +14,8 @@
     "pinia": "^2.1.7",
     "primevue": "^4.0.6",
     "slugify": "^1.6.6",
-    "vue": "^3.5.6"
+    "vue": "^3.5.6",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.3",

src/App.vue

@@ -1,28 +1,21 @@
 <template>
-  <component :is="components[data.template]" v-if="data" :data="data" />
+  <h1 v-if="page" class="sr-only">{{ page.content.title }}</h1>
+  <div class="with-sidebar">
+    <Menu />
+    <main>
+      <RouterView />
+    </main>
+  </div>
 </template>
 
 <script setup>
-import { useApiStore } from "./stores/api";
 import { useUserStore } from "./stores/user";
-import { ref } from "vue";
-import home from "./views/Home.vue";
-import notifications from "./views/Notifications.vue";
-import reunions from "./views/Reunions.vue";
-import inspirations from "./views/Inspirations.vue";
 import { storeToRefs } from "pinia";
+import Menu from "./components/Menu.vue";
+import { usePageStore } from "./stores/page";
 
-const components = {
-  home,
-  notifications,
-  reunions,
-  inspirations
-};
+const { page } = storeToRefs(usePageStore());
 
 const { user } = storeToRefs(useUserStore());
 user.value = kirbyData.user;
-
-const data = ref(null);
-const api = useApiStore();
-api.fetchPageData().then((res) => (data.value = res));
 </script>

src/components/Menu.vue

@@ -1,8 +1,4 @@
 <template>
-  <!-- Changer le Menu actif
-    class="active" sur le <li>
-    aria-current="page" sur le <a>
-  -->
   <button
     @click="toggleExpand()"
     class="btn btn--white | rounded-xl"
@@ -42,9 +38,11 @@
           :key="mainItem.path"
           :class="{ active: isCurrent(mainItem) }"
         >
-          <a :href="mainItem.path" :aria-current="isCurrent(mainItem)">{{
-            mainItem.title
-          }}</a>
+          <router-link
+            :to="mainItem.path"
+            :aria-current="isCurrent(mainItem)"
+            >{{ mainItem.title }}</router-link
+          >
           <span v-if="mainItem.pill" class="pill pill--secondary">{{
             mainItem.pill
           }}</span>
@@ -54,7 +52,9 @@
         <summary>Projets en cours</summary>
         <ul>
           <li v-for="project in currentProjects">
-            <a :href="project.url" class="new">{{ project.title }}</a>
+            <router-link :to="project.url" class="new">{{
+              project.title
+            }}</router-link>
           </li>
         </ul>
       </details>
@@ -62,7 +62,9 @@
         <summary>Projets archivés</summary>
         <ul>
           <li v-for="project in archivedProjects">
-            <a :href="project.url" class="new">{{ project.title }}</a>
+            <router-link :to="project.url" class="new">{{
+              project.title
+            }}</router-link>
           </li>
         </ul>
       </details>
@@ -70,10 +72,10 @@
     <footer class="w-full">
       <ul class="flex">
         <li data-icon="user">
-          <a href="#">Profil</a>
+          <router-link to="/profil">Profil</router-link>
         </li>
         <li data-icon="logout">
-          <a href="/logout.php">Déconnexion</a>
+          <router-link to="/logout">Déconnexion</router-link>
         </li>
       </ul>
     </footer>
@@ -84,7 +86,9 @@
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
 import { useProjectsStore } from "../stores/projects";
+import { useRoute } from "vue-router";
 
+const route = useRoute();
 const isExpanded = ref(true);
 const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore());
 
@@ -118,7 +122,7 @@ function toggleExpand() {
 }
 
 function isCurrent(navItem) {
-  return navItem.path === window.location.pathname;
+  return navItem.path === route.path;
 }
 </script>
 
@@ -254,7 +258,6 @@ button[aria-controls="menu"][aria-expanded="false"] {
   background-color: var(--color-primary-10);
 }
 
-
 #menu details {
   font-family: var(--font-serif);
   background-size: 1px 21px;

src/main.js

@@ -4,13 +4,15 @@ import App from "./App.vue";
 import { createPinia } from "pinia";
 import PrimeVue from "primevue/config";
 import Select from "primevue/select";
+import { router } from "./router/router.js";
 
 const app = createApp(App);
 const pinia = createPinia();
 
 app.use(pinia);
 app.use(PrimeVue, {
-  unstyled: true
+  unstyled: true,
 });
-app.component('Select', Select);
+app.use(router);
+app.component("Select", Select);
 app.mount("#app");

src/router/router.js

@@ -0,0 +1,40 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Home from "../views/Home.vue";
+import Inspirations from "../views/Inspirations.vue";
+import { useApiStore } from "../stores/api";
+import { usePageStore } from "../stores/page";
+import { getActivePinia } from "pinia";
+
+const routes = [
+  {
+    path: "/",
+    component: Home,
+  },
+  {
+    path: "/inspirations",
+    component: Inspirations,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+router.beforeEach(async (to, from, next) => {
+  const pinia = getActivePinia();
+  const api = useApiStore(pinia);
+  const page = usePageStore(pinia);
+
+  try {
+    const res = await api.fetchPageData(to.path);
+
+    page.page = res;
+    next();
+  } catch (error) {
+    console.error(error);
+    next(false);
+  }
+});
+
+export { router };

src/stores/page.js

@@ -0,0 +1,8 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const usePageStore = defineStore("page", () => {
+  const page = ref(null);
+
+  return { page };
+});

src/stores/projects.js

@@ -1,7 +1,6 @@
 import { defineStore } from "pinia";
 import { useApiStore } from "./api.js";
 import { ref, computed } from "vue";
-import { useUserStore } from "./user.js";
 
 export const useProjectsStore = defineStore("projects", () => {
   const projects = ref([]);

src/views/Home.vue

@@ -1,12 +1,5 @@
 <template>
-  <h1 class="sr-only">{{ data.content.title }}</h1>
-  <div class="with-sidebar">
-    <Menu />
-    <main>
-      <Projects />
-      <button class="btn | absolute right-0 bottom-0">Demander la création d’un projet</button>
-    </main>
-  </div>
+  <Projects />
 </template>
 
 <script setup>

src/views/Inspirations.vue

@@ -1,43 +1,35 @@
 <template>
-  <h1 class="sr-only">{{ data.content.title }}</h1>
-  <div class="with-sidebar">
-    <Menu />
-    <main>
-      <h2 id="tabslist" class="sr-only">Les Inspirations / Mes Favoris</h2>
-      <Tabs :tabs="tabs" @update:currentTab="changeTab" />
-      <Selector />
-      <section :id="currentTab" class="inspiration" aria-labelledby="inspiration-title">
-        <Header v-if="currentTab === 'all'" :inspiration="currentInspiration" />
-        <div class="masonry flow">
-          <template
-            v-for="(item, index) in currentInspiration.media"
-            :key="item.id"
-          >
-            <Image
-              :item="item"
-              :inspirationUri="currentInspiration.uri"
-              :currentTab="currentTab"
-            />
-          </template>
-        </div>
-      </section>
-    </main>
-  </div>
+  <h2 id="tabslist" class="sr-only">Inspirations</h2>
+  <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+  <Selector />
+  <section :id="currentTab" class="inspiration">
+    <Header :inspiration="currentInspiration" />
+    <div class="masonry flow">
+      <template
+        v-for="(item, index) in currentInspiration.media"
+        :key="item.id"
+      >
+        <Image
+          :item="item"
+          :inspirationUri="currentInspiration.uri"
+          :currentTab="currentTab"
+        />
+      </template>
+    </div>
+  </section>
 </template>
 
 <script setup>
-import Menu from "../components/Menu.vue";
 import Selector from "../components/inspirations/Selector.vue";
 import Header from "../components/inspirations/Header.vue";
 import Tabs from "../components/Tabs.vue";
 import Image from "../components/inspirations/Image.vue";
 import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
+import { usePageStore } from "../stores/page";
+import { storeToRefs } from "pinia";
 
-const { data } = defineProps({
-  data: Object
-});
-
+const { page } = storeToRefs(usePageStore());
 const user = useUserStore().user;
 const currentTab = ref("all");
 const tabs = computed(() => {
@@ -59,7 +51,7 @@ const tabs = computed(() => {
   ];
 });
 
-const currentInspiration = ref(data.inspirations[0]);
+const currentInspiration = ref(page.value.inspirations[0]);
 const favoriteImages = computed(() => {
   return currentInspiration.value.media.filter(
     (image) => image.favoriteForUsers?.includes(user.uuid) ?? false
@@ -69,7 +61,6 @@ const favoriteImages = computed(() => {
 function changeTab(newValue) {
   currentTab.value = newValue;
 }
-
 </script>
 
 <style scoped>