Set up the api factory and very first service

resources/js_vue3/router.js

@@ -6,14 +6,9 @@ const router = createRouter({
   history: createWebHistory('/'),
   routes: [
     { path: '/accounts', name: 'accounts', component: Accounts, meta: { requiresAuth: true }, alias: '/', props: true },
-    // {
-    //   path: '/about',
-    //   name: 'about',
-    //   // route level code-splitting
-    //   // this generates a separate chunk (About.[hash].js) for this route
-    //   // which is lazy-loaded when the route is visited.
-    //   component: () => import('../views/AboutView.vue')
-    // }
+    
+    // Lazy loaded view
+    { path: '/about', name: 'about', component: () => import('./views/About.vue') }
   ]
 })
 

resources/js_vue3/services/apiFactory.js

@@ -0,0 +1,39 @@
+import axios from "axios"
+
+export const apiFactory = (endpoint = 'api') => {
+	let baseURL
+
+	if (endpoint === 'web') {
+		baseURL = '/'
+	} else {
+		baseURL = '/api'
+	}
+
+	const apiClient = axios.create({
+		baseURL,
+		headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' },
+		withCredentials: true,
+	})
+
+    // see https://github.com/fsgreco/vue3-laravel-api/blob/main/src/api/middlewareCSRF.js
+	//apiClient.interceptors.request.use( middlewareCSRF, err => Promise.reject(err)) 
+
+    apiClient.interceptors.response.use(
+        (response) => {
+            return response;
+        },
+        function (error) {
+            if (
+                error.response &&
+                [401, 419].includes(error.response.status)
+                // && store.getters["auth/authUser"] &&
+                // !store.getters["auth/guest"]
+            ) {
+                // store.dispatch("auth/logout");
+            }
+            return Promise.reject(error);
+        }
+    )
+
+	return apiClient
+}

resources/js_vue3/services/systemService.js

@@ -0,0 +1,14 @@
+import { apiFactory } from '@/services/apiFactory'
+
+const web = apiFactory('web')
+
+export default {
+    /**
+     * 
+     * @returns 
+     */
+    getSystemInfos() {
+        return web.get('infos')
+    },
+    
+}

resources/js_vue3/views/About.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <h1>On About view</h1>
+        <div>
+            {{ infos }}
+        </div>
+        <br />
+        <div>
+            {{ toto }}
+        </div>
+        <router-link :to="{ name: 'accounts' }">Go to About</router-link>
+    </div>
+</template>
+
+<script>
+    import SystemService from "@/services/systemService";
+
+    export default {
+
+        name: 'About',
+
+        data() {
+            return {
+                infos : null,
+                toto : '',
+            }
+        },
+
+        mounted() {
+            this.getInfos().then()
+            this.toto = 'jknlkjnlkjnlkjnlkjn'
+        },
+
+        methods: {
+            
+            async getInfos()  {
+                await SystemService.getSystemInfos().then(response => {
+                    this.infos = response.data
+                })
+            },
+        }
+    }
+</script>

resources/js_vue3/views/Accounts.vue

@@ -4,4 +4,5 @@
 
 <template>
     <div>On Accounts view</div>
+    <router-link :to="{ name: 'about' }">Go to About</router-link>
 </template>