How to Install Vue.js in Laravel 12: Step-by-Step Guide with Code Examples

Why Use Vue.js with Laravel 12? Benefits and Use Cases

Laravel and Vue.js are one of the most popular full-stack combinations in modern web development. Laravel handles backend routing, authentication, database operations, and APIs, while Vue manages reactive, component-driven user interfaces on the frontend.

Using Vue in Laravel 12 allows you to create dynamic interfaces without fully committing to a single-page application (SPA). You can progressively enhance Blade views with Vue components or build full SPA-style layouts powered by Vue Router when needed. Since Laravel 12 uses Vite as its default build tool, integrating Vue 3 is faster and simpler than ever before.

Table Of Content

1 Prerequisites

Before starting, make sure your development environment meets the following requirements:

• PHP 8.2 or higher — Laravel 12 requires PHP 8.2 as the minimum version
• Composer 2.x — Dependency manager for PHP (Download Composer)
• Node.js 18+ and npm 9+ — Required for Vite and Vue package installation
• A code editor — VS Code is recommended with Volar extension for Vue support

If you haven't set up Laravel 12 yet, check our guide on How to Upgrade from Laravel 11 to Laravel 12 to get started quickly.

2 Introduction

In this comprehensive guide, you will learn how to install Vue.js in Laravel 12 from scratch, configure Vite for Vue support, and build your first interactive Vue component with a clean, scalable setup.

We will cover everything from project creation to running the development server — including the Vite configuration, the main JavaScript entry point, Blade template modifications, and creating reusable Vue components using Vue 3's Composition API with <script setup> syntax.

By the end of this tutorial, you will have a fully working Laravel 12 + Vue 3 application that you can extend with additional components, routing, and API integration. This approach works great whether you are building admin dashboards, interactive forms, or real-time UI features.

3 Create a Fresh Laravel 12 Project

First, ensure Composer is installed on your system. Use the following command to create a new Laravel 12 project:

composer create-project laravel/laravel:^12.0 laravel-vue-app

The ^12.0 constraint ensures you get the latest Laravel 12.x release.

Navigate to your project directory:

cd laravel-vue-app

Start the development server to verify the installation:

php artisan serve

Visit http://127.0.0.1:8000 in your browser to see the default Laravel welcome page. This command creates the complete project structure, including the resources folder where your Vue files will live.

If you run into issues during setup, refer to our post on Common Laravel 12 Errors and How to Fix Them.

4 Install Vue.js and Vite Plugin

Laravel 12 uses Vite as its default build tool, so Vue integration is straightforward with no additional bundler configuration needed.

Install Vue.js (version 3) and the Vite Vue plugin via npm:

npm install vue@3 @vitejs/plugin-vue

This adds Vue's core library and the official Vite plugin needed to process Vue single-file components (.vue files). Vue 3 introduces the Composition API, which is more flexible and scalable for complex application logic.

You can verify the installation by checking your package.json — both vue and @vitejs/plugin-vue should appear under dependencies.

5 Configure Vite for Vue Support

Open vite.config.js in the root directory and update it to include the Vue plugin:

    
   // vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js', // optional: ensures full Vue features
        },
    },
});
    

This configuration tells Vite to process Vue files and bundle your JavaScript/CSS. The refresh: true enables live reloading during development.

6 Set Up the Main JavaScript File (app.js)

Now, open the main JavaScript entry file at resources/js/app.js and initialize Vue for your Laravel 12 application.

Replace the existing content with the following:

    
    // resources/js/app.js
    import './bootstrap';
    import { createApp } from 'vue';
    import App from './components/App.vue';

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

Here, createApp initializes a new Vue 3 application instance, imports the root component (App.vue) from the components directory, and mounts it to an HTML element with id="app". The bootstrap.js file is Laravel's default utility file that sets up Axios and other JavaScript helpers.

7 Modify the Blade Template

Update resources/views/welcome.blade.php to include the Vue mount point and Vite directives:

    
    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 12 + Vue 3</title>

        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        <div id="app"></div>
    </body>
    </html>
    

The @vite directive loads compiled assets. Add Bootstrap or other CSS if needed for styling.

8 Create Your First Vue Component

Create a components folder inside resources/js/ and then create App.vue:

    
    <!-- resources/js/components/App.vue -->
<template>
    <div class="vue-app">
        <h1>Welcome to Laravel 12 + Vue 3</h1>
        <p>Modern frontend in your Laravel application</p>

        <Counter />
        
        <div class="message-box">
            <input v-model="message" placeholder="Type something..." />
            <p>You typed: <strong>{{ message }}</strong></p>
        </div>

        <footer>
            <small>Created on {{ currentDate }}</small>
        </footer>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import Counter from './Counter.vue';

// Reactive state
const message = ref('');

// Computed property example
const currentDate = computed(() => {
    return new Date().toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
});
</script>

<style scoped>
.vue-app {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background: #f9fafb;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-family: system-ui, sans-serif;
}

h1 {
    color: #1d4ed8;
    margin-bottom: 16px;
}

.message-box {
    margin-top: 24px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

footer {
    margin-top: 32px;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}
</style>
    

Next, in the same resources/js/components/ folder, create Counter.vue:

    
   <!-- resources/js/components/Counter.vue -->
<template>
    <div class="counter">
        <h2>Counter Example</h2>
        <div class="counter-display">
            <button @click="decrement" class="btn">-</button>
            <span class="count">{{ count }}</span>
            <button @click="increment" class="btn">+</button>
        </div>
        <p>Current count is {{ count }} → 
           <span :class="count >= 5 ? 'hot' : ''">
               {{ status }}
           </span>
        </p>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);

const increment = () => count.value++;
const decrement = () => count.value--;

const status = computed(() => {
    if (count.value === 0) return 'at zero';
    if (count.value > 0) return 'positive';
    return 'negative';
});
</script>

<style scoped>
.counter {
    margin: 24px 0;
    padding: 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.counter-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
}

.btn {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    border: none;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.btn:hover {
    background: #2563eb;
}

.count {
    font-size: 2.5rem;
    font-weight: bold;
    min-width: 60px;
}

.hot {
    color: #dc2626;
    font-weight: bold;
}
</style>
    

These are Vue 3 single-file components (SFC) with template, script, and scoped styles in one file. The <script setup> syntax is Vue 3's Composition API shorthand that makes the code cleaner and more concise. The App.vue component demonstrates reactive data binding with v-model and computed properties, while Counter.vue showcases event handling and conditional styling.

9 Folder Structure

10 Compile and Run the Application

You need two terminal windows running simultaneously:

    # Terminal 1 - Start the Laravel development server
    php artisan serve

    # Terminal 2 - Start Vite dev server (enables hot reload)
    npm run dev
    

Visit: http://127.0.0.1:8000/

You should see:

• A styled Vue app container with a heading and description
• An interactive counter with increment/decrement buttons
• A two-way data binding input field
• The current date displayed dynamically

Quick Troubleshooting Checklist

• Run npm install first to install all dependencies
• Both php artisan serve and npm run dev must be running at the same time
• Check the browser console (F12) for JavaScript errors
• Verify file paths match exactly — especially inside resources/js/components/
• Ensure you are using Vue 3 syntax (not Vue 2 Options API)
• Clear browser cache if changes are not reflecting

For production deployment, run npm run build to compile and minify all assets. Vite will output optimized files to the public/build directory.

Want to optimize your Laravel app further? Read our Laravel 12 Performance Optimization Tips.

11 Conclusion

Installing Vue.js in Laravel 12 is clean, fast, and production-ready thanks to Vite's modern build system. Whether you're adding small interactive elements to existing Blade templates or building advanced frontend interfaces with multiple components, this setup gives you the flexibility to scale without unnecessary complexity.

With proper project structure, Vue 3's Composition API, and Laravel's powerful backend features, you have a full-stack development experience that is both developer-friendly and performant.

Next Steps: Now that you have Vue running in Laravel 12, consider exploring these related tutorials to level up your application:

• How to Build a REST API in Laravel 12 — Connect your Vue frontend to a Laravel API
• Best Authentication Options in Laravel 12 — Add secure login to your Vue + Laravel app
• Laravel 12 Performance Optimization Tips — Make your application lightning fast
• Laravel 12 React Starter Kit — Compare Vue setup with React alternative

Related Laravel 12 Tutorials

Frequently Asked Questions