Add proper use of vue router and fix some small vue conventions

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>

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>

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';
 

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;

playground/src/pages/home.vue → 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({