From e0716fd90d1d411bcd2a962e5afdaf0f616220d7 Mon Sep 17 00:00:00 2001
From: samuelreichor <samuelreichor@gmail.com>
Date: Sat, 9 Nov 2024 13:37:13 +0100
Subject: [PATCH] Add proper use of vue router and fix some small vue
 conventions

---
 playground/src/App.vue                        |  4 +++
 playground/src/CraftRouter.vue                | 28 +++++++++++++------
 playground/src/main.ts                        |  2 +-
 playground/src/router.ts                      | 13 +++------
 .../{helpers/utils.ts => utils/fetcher.ts}    |  0
 playground/src/{pages => views}/404.vue       |  0
 playground/src/{pages => views}/home.vue      |  2 +-
 playground/src/{pages => views}/news.vue      |  0
 8 files changed, 29 insertions(+), 20 deletions(-)
 rename playground/src/{helpers/utils.ts => utils/fetcher.ts} (100%)
 rename playground/src/{pages => views}/404.vue (100%)
 rename playground/src/{pages => views}/home.vue (95%)
 rename playground/src/{pages => views}/news.vue (100%)

diff --git a/playground/src/App.vue b/playground/src/App.vue
index 1e84972..c2a1a76 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -15,6 +15,10 @@
 
 <template>
   <main>
+    <nav>
+      <RouterLink to="/">Go to Home</RouterLink>
+      <RouterLink to="/news-article-1">Go to News Article 1</RouterLink>
+    </nav>
     <Suspense>
       <RouterView />
     </Suspense>
diff --git a/playground/src/CraftRouter.vue b/playground/src/CraftRouter.vue
index 19d82b2..a6c74c2 100644
--- a/playground/src/CraftRouter.vue
+++ b/playground/src/CraftRouter.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-  import { useCraftUrlBuilder, type Config } from '@vue-craftcms';
-  import Home from './pages/home.vue';
-  import News from './pages/news.vue';
-  import { ref } from 'vue';
-  import { CraftNotImplemented } from '@vue-craftcms';
+  import { ref, watch } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { useCraftUrlBuilder, CraftNotImplemented, type Config } from '@vue-craftcms';
+  import { fetchData } from './utils/fetcher';
+
+  import Home from './views/home.vue';
+  import News from './views/news.vue';
   import Headline from './components/headline.vue';
-  import { fetchData } from './helpers/utils';
 
   const mapping: Config = {
     pages: {
@@ -18,9 +19,18 @@
     },
   };
 
-  const uri = '__home__';
-  const queryPageUrl = useCraftUrlBuilder('entries').uri(uri).buildUrl('one');
-  const data = ref(await fetchData(queryPageUrl));
+  const route = useRoute();
+  const urlBuilder = useCraftUrlBuilder('entries');
+  const uri = ref(route.params.pathMatch || '__home__');
+  const data = ref(await fetchData(urlBuilder.uri(uri.value).buildUrl('one')));
+
+  watch(
+    () => route.fullPath,
+    async () => {
+      uri.value = route.params.pathMatch || '__home__';
+      data.value = await fetchData(urlBuilder.uri(uri.value).buildUrl('one'));
+    },
+  );
 </script>
 
 <template>
diff --git a/playground/src/main.ts b/playground/src/main.ts
index d0cbc73..0c53c91 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,5 +1,5 @@
 import { CraftCms } from '@vue-craftcms';
-import router from './router';
+import { router } from './router';
 import { createApp } from 'vue';
 import App from './App.vue';
 
diff --git a/playground/src/router.ts b/playground/src/router.ts
index fd39221..8cab479 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -1,12 +1,7 @@
-import { createMemoryHistory, createRouter } from 'vue-router';
-
+import { createRouter, createWebHistory } from 'vue-router';
 import CraftRouter from './CraftRouter.vue';
 
-const routes = [{ path: '/:pathMatch(.*)*', name: 'CraftRouter', component: CraftRouter }];
-
-const router = createRouter({
-  history: createMemoryHistory(),
-  routes,
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/:pathMatch(.*)*', component: CraftRouter }],
 });
-
-export default router;
diff --git a/playground/src/helpers/utils.ts b/playground/src/utils/fetcher.ts
similarity index 100%
rename from playground/src/helpers/utils.ts
rename to playground/src/utils/fetcher.ts
diff --git a/playground/src/pages/404.vue b/playground/src/views/404.vue
similarity index 100%
rename from playground/src/pages/404.vue
rename to playground/src/views/404.vue
diff --git a/playground/src/pages/home.vue b/playground/src/views/home.vue
similarity index 95%
rename from playground/src/pages/home.vue
rename to playground/src/views/home.vue
index f0eef72..51be10f 100644
--- a/playground/src/pages/home.vue
+++ b/playground/src/views/home.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useCraftUrlBuilder } from '@vue-craftcms';
-  import { fetchData } from '../helpers/utils';
+  import { fetchData } from '../utils/fetcher';
   import { ref } from 'vue';
 
   const props = defineProps({
diff --git a/playground/src/pages/news.vue b/playground/src/views/news.vue
similarity index 100%
rename from playground/src/pages/news.vue
rename to playground/src/views/news.vue