Laravel 9 Vue 3 installation with vue-router

1) install laravel

2) install laravel/ui

3) install Auth

4) install vue

npm install vue@next @vue/compiler-sfc vue-loader@next

npm install vue-router@4

npm install @vitejs/plugin-vue

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js','resources/css/app.css']),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
        
    ],
    resolve: {
        alias: {
          vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

app.js

import './bootstrap';

import {createApp} from 'vue'
import * as VueRouter from 'vue-router'
import ExampleComponent from './components/home.vue'
import AboutComponent from './components/about.vue'
const routes = [
    {path: '/home', component: ExampleComponent},
    {path: '/about', component: AboutComponent},
]

const router = VueRouter.createRouter({
    history: VueRouter.createWebHistory('/ilhdb4/public/'),
    routes,
})
const app = createApp({})
app.use(router)
app.mount('#app')