feat: bootstrap Vue 3 app with Vue Router and Axios

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package-lock.json

@@ -15,7 +15,8 @@
                 "leaflet": "^1.9.4",
                 "tailwindcss": "^4.0.7",
                 "vite": "^8.0.0",
-                "vue": "^3.5.32"
+                "vue": "^3.5.32",
+                "vue-router": "^4.6.4"
             },
             "optionalDependencies": {
                 "@rollup/rollup-linux-x64-gnu": "4.9.5",
@@ -811,6 +812,12 @@
                 "@vue/shared": "3.5.32"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+            "license": "MIT"
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.5.32",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.32.tgz",
@@ -2202,6 +2209,21 @@
                 }
             }
         },
+        "node_modules/vue-router": {
+            "version": "4.6.4",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+            "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-api": "^6.6.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
         "node_modules/wrap-ansi": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

package.json

@@ -17,7 +17,8 @@
         "leaflet": "^1.9.4",
         "tailwindcss": "^4.0.7",
         "vite": "^8.0.0",
-        "vue": "^3.5.32"
+        "vue": "^3.5.32",
+        "vue-router": "^4.6.4"
     },
     "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "4.9.5",

resources/js/App.vue

@@ -0,0 +1,7 @@
+<template>
+    <RouterView />
+</template>
+
+<script setup>
+import { RouterView } from 'vue-router'
+</script>

resources/js/app.js

@@ -1,6 +1,5 @@
-import 'iconify-icon';
+import { createApp } from 'vue'
-import { stationMap } from './maps/station-map.js';
+import App from './App.vue'
+import router from './router/index.js'
 
-document.addEventListener('alpine:init', () => {
+createApp(App).use(router).mount('#app')
-    Alpine.data('stationMap', stationMap);
-});

resources/js/axios.js

@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+const api = axios.create({
+    baseURL: '/api',
+    withCredentials: true,
+    withXSRFToken: true,
+    headers: {
+        'Accept': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+    },
+})
+
+export default api

resources/js/router/index.js

@@ -0,0 +1,24 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import DashboardLayout from '../views/dashboard/DashboardLayout.vue'
+import Overview from '../views/dashboard/Overview.vue'
+import SavedStations from '../views/dashboard/SavedStations.vue'
+import Preferences from '../views/dashboard/Preferences.vue'
+
+const routes = [
+    { path: '/', component: Home, name: 'home' },
+    {
+        path: '/dashboard',
+        component: DashboardLayout,
+        children: [
+            { path: '', component: Overview, name: 'dashboard' },
+            { path: 'saved-stations', component: SavedStations, name: 'dashboard.saved-stations' },
+            { path: 'preferences', component: Preferences, name: 'dashboard.preferences' },
+        ],
+    },
+]
+
+export default createRouter({
+    history: createWebHistory(),
+    routes,
+})

resources/js/views/Home.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="min-h-screen flex items-center justify-center">
+        <p class="text-xl font-bold text-[#bb5b3e]">FuelAlert — Home (coming soon)</p>
+    </div>
+</template>

resources/js/views/dashboard/DashboardLayout.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="min-h-screen flex items-center justify-center">
+        <RouterView />
+    </div>
+</template>
+<script setup>
+import { RouterView } from 'vue-router'
+</script>

resources/js/views/dashboard/Overview.vue

@@ -0,0 +1 @@
+<template><div class="p-8 font-bold text-[#bb5b3e]">Dashboard Overview (coming soon)</div></template>

resources/js/views/dashboard/Preferences.vue

@@ -0,0 +1 @@
+<template><div class="p-8 font-bold text-[#bb5b3e]">Preferences (coming soon)</div></template>

resources/js/views/dashboard/SavedStations.vue

@@ -0,0 +1 @@
+<template><div class="p-8 font-bold text-[#bb5b3e]">Saved Stations (coming soon)</div></template>