Add Vue.js to any Laravel project

How to Add Vue.js to Any Laravel Project

Integrating Vue.js into a Laravel application is straightforward thanks to Vite, Laravel's modern frontend build tool. This guide will walk you through the process step by step.

Works with Laravel 9+ and Laravel 10

Introduction to Vue.js in Laravel
Install Vue.js via NPM/Yarn/Bun
Configure Vite for Vue.js
Initialize Vue.js in Laravel
Verify Vue.js is Working
Compile Your Code

1. Introduction to Vue.js in Laravel

Vue.js is a progressive JavaScript framework for building interactive web interfaces. It's highly compatible with Laravel, especially when using tools like Inertia.js or Livewire.

While Vue can be added to any frontend project, Laravel makes it even easier with Vite, a fast modern bundler.

2. Install Vue.js via NPM/Yarn/Bun

To get started, install Vue and the official Vite plugin:

Using NPM:

npm install vue @vitejs/plugin-vue

Using Yarn:

yarn add vue @vitejs/plugin-vue

Using Bun:

bun add vue @vitejs/plugin-vue

3. Configure Vite for Vue.js

Open your vite.config.js file and update it as follows:

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: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
})

The alias ensures the Vue version with the template compiler is used.

4. Initialize Vue.js in Laravel

Edit resources/js/app.js To initialize the Vue application:

import { createApp } from 'vue'

const app = createApp()
app.mount('#app')

Next, include the app.js file in your Blade layout and add a root div for Vue:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        <!-- Vue components will be rendered here -->
    </div>
</body>
</html>

5. Verify Vue.js is Working

Let’s create a simple Vue component to test it:

resources/js/components/Counter.vue

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Add</button>
  </div>
</template>

Now register the component in app.js:

import { createApp } from 'vue'
import Counter from './components/Counter.vue'

const app = createApp()
app.component('counter', Counter)
app.mount('#app')

Then use the component in your Blade template:

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

6. Compile Your Code

Finally, start your development server:

With NPM:

npm run dev

With Yarn:

yarn dev

With Bun:

bun run dev

Open your browser, and you should see your Vue counter working!

Conclusion

That’s it! You’ve successfully integrated Vue.js into your Laravel project. You can now build interactive components and dynamic user interfaces with ease.

Souy Soeng