In this guide, I will walk you through the process of installing Vue.js in a Laravel project and setting it up as a Single Page Application (SPA). We'll cover everything from installing necessary packages to configuring routing within Vue.

Step 1: Install Laravel

First, let's start by installing a fresh Laravel project. You can do this by running the following command:

composer create-project --prefer-dist laravel/laravel your-project-name

Replace your-project-name with the desired name for your project. This will create a new directory with the Laravel framework installed.

Step 2: Install Vue.js and Required Packages

Now that Laravel is set up, let's install the latest version of Vue.js and some essential plugins:

npm install vue@latest
npm install vue-loader@latest
npm install @vitejs/plugin-vue

Step 3: Configure Vite to Use Vue

Next, we need to configure Vite, the front-end build tool that Laravel uses by default. In your vite.config.js file, import the Vue plugin and add it to the plugins array.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),  // this is what we have imported
    ],
});

Step 4: Add Vite Directives in Blade Template

Now, include the necessary Vite directives in your welcome.blade.php (or any other Blade file) to link the CSS and JS files.

@vite('resources/css/app.css')
@vite('resources/js/app.js')

<div id="app"></div>

This div with id="app" will serve as the mount point for your Vue.js application.

Step 5: Build and Run Your Application

Run the following commands to install dependencies and start the development server:

npm install
npm run dev

Step 6: Create Vue Components

Next, let's create a few Vue components. In resources/js/components/, create the following files:

HomePage.vue

<template>
    <h1>Home Page</h1>
</template>

<script>
export default {
    name: 'HomePage',
};
</script>

AboutPage.vue

<template>
    <h1>About Page</h1>
</template>

<script>
export default {
    name: 'AboutPage',
};
</script>

NotFound.vue

<template>
    <h1>Page Not Found</h1>
</template>

<script>
export default {
    name: 'NotFound',
};
</script>

Step 7: Initialize Vue in app.js

In resources/js/app.js, import Vue and your components, then create a Vue instance and mount it to the #app element.

import { createApp } from 'vue';
import App from './components/App.vue';

createApp(App).mount('#app');

Step 8: Install Vue Router for SPA Functionality

To enable routing in your Vue application, install the Vue Router:

npm install vue-router@4

Step 9: Create Vue Router Configuration

Next, create a folder named router in resources/js/ and add a file named index.js for defining your routes.

import { createRouter, createWebHistory } from 'vue-router';

import Home from '../components/HomePage.vue';
import About from '../components/AboutPage.vue';
import NotFound from '../components/NotFound.vue';

const routes = [
    {
        path: '/',
        component: Home,
    },
    {
        path: '/about',
        component: About,
    },
    {
        path: '/:pathMatch(.*)*',
        component: NotFound,
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

Step 10: Inject Router into Vue

Modify your app.js to use the router:

import { createApp } from 'vue';
import App from './components/App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Step 11: Utilize Routes in Your Vue Components

You can now use the Vue Router in your components. Here's an example of a simple navigation bar:

Create a file in components/Vue.js & add below code for naviagation menu:

<template>
    <nav>
        <router-link class="nav-link" to="/">Home</router-link>
        <router-link class="nav-link" to="/about">About</router-link>
    </nav>
    <router-view></router-view>
</template>

<style>
.nav-link{
    margin: 10px;
}
</style>

Step 12: Set Up Laravel Routes

Finally, make sure your Laravel routes are set up to handle the SPA by modifying your web.php file:

Route::get('/{pathMatch}', function () {
    return view('welcome');
})->where('pathMatch', ".*");

And that's it! Your Laravel application is now fully set up to use Vue.js as a Single Page Application with routing. Happy coding!