How to Integrate Vue.js into Any Laravel Project

Vue.js is a powerful JavaScript framework used for building user interfaces. While it can be added to any web project (such as Rails, Symfony, or WordPress), it is especially popular among Laravel developers, particularly when paired with Inertia.js.

Setting up JavaScript frameworks like Vue can sometimes seem complicated, but this guide will simplify the process of integrating Vue.js into your Laravel project.

Installing Vue.js in Laravel with NPM

First, install Vue.js along with the necessary plugin to seamlessly integrate it with Vite, which is Laravel’s default bundler:

npm install vue @vitejs/plugin-vue

Configuring Vite for Vue.js in Laravel

Now that Vue and its plugin are installed, you need to configure Vite to support Vue.js.

In your vite.config.js, add the following modifications:

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(),
    ],
    resolve: {
        alias: {…