feat: bootstrap Vue 3 app with Vue Router and Axios

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

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 { stationMap } from './maps/station-map.js';
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router/index.js'
 
-document.addEventListener('alpine:init', () => {
-    Alpine.data('stationMap', stationMap);
-});
+createApp(App).use(router).mount('#app')

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>