Laravel 12 + Vue 3 Integration: The Complete Guide (Starter Kits & Custom Setup)

Laravel 12, released in early 2025, brings a host of developer-focused improvements. One of the biggest highlights is its modernized frontend tooling powered by Vite and official starter kits that support Vue 3, React, and Livewire out of the box.

In this guide, we'll explore:

What's new in Laravel 12
How to integrate Vue using official starter kits
How to integrate Vue manually using @vitejs/plugin-vue
How to call Vue components inside Blade files

Let’s dive in!

🎯 What's New in Laravel 12?

Laravel 12 continues Laravel's tradition of clean syntax and developer-friendly tooling. Some key enhancements:

✅ Unified Scaffolding: Simplified Artisan commands to scaffold models, migrations, controllers, factories, etc.
✅ Improved error handling and developer tooling
✅ First-party UI Starter Kits with Vue, React, and Livewire (no need for Jetstream or Breeze)
✅ Vite-powered frontend with official plugins for Vue and React

✅ Option 1: Integrate Vue Using Laravel's Starter Kit

Laravel 12 includes an official Vue Starter Kit that sets up everything you need: Vue 3 + Inertia.js + Tailwind CSS + Shadcn Vue components.

🛠️ Steps:

1. Create a New Laravel App

laravel new my-vue-app
cd my-vue-app

2. Choose Vue Starter Kit

The Laravel installer will ask you to choose a frontend stack. Select:

> Vue starter kits

3. Install Frontend Dependencies

npm install
npm run dev

4. Run the Application

php artisan serve

Your Laravel app now includes a fully working Vue + Inertia setup. You can start creating pages in resources/js/Pages.

🔧 Option 2: Manually Integrate Vue in Laravel 12 Using `@vitejs/plugin-vue`

If you're building a custom stack or want Vue without Inertia, here’s how to do it manually:

🧱 Step-by-Step Guide

1. Install Vue and the Vite Vue Plugin

npm install vue
npm install --save-dev @vitejs/plugin-vue

2. Update Vite Config (`vite.config.js`)

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

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

3. Initialize Vue in `resources/js/app.js`

import './bootstrap';
import { createApp } from 'vue';
import Home from './components/Home.vue';

const app = createApp({});
app.component('home-component', Home);
app.mount('#app');

4. Create a Vue Component

Create resources/js/components/Home.vue:

<template>
  <div>
    <h2 class="text-2xl font-bold text-blue-600">Hello from Vue 3 in Laravel 12 🎉</h2>
  </div>
</template>

<script setup>
// You can add logic here
</script>

<style scoped>
h2 {
  margin: 10px 0;
}
</style>

🧩 How to Use Vue Components Inside Blade Files

Now that Vue is set up, you can render Vue components inside your Blade templates.

Example: `resources/views/welcome.blade.php`

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 12 + Vue 3</title>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  <div id="app">
    <home-component></home-component>
  </div>
</body>
</html>

The <div id="app"> is where Vue mounts, and home-component is your Vue component.

Make sure this file is loaded through a web route:

// routes/web.php
Route::get('/', function () {
    return view('welcome');
});

Now run the dev server and Laravel:

npm run dev
php artisan serve

🎉 You’ll see your Vue component rendered inside the Blade file!

📝 Best Practices

Use <script setup> in Vue 3 components for simpler syntax
Keep Vue components in resources/js/components/
Organize files clearly if you're building a large app (composables, layouts, pages)
Always wrap your Vue app in a #app div to enable mounting
Run npm run build before deploying to production

✅ Final Thoughts

Laravel 12 is a game-changer for modern web development. With official Vue starter kits or a custom Vite-based setup, integrating Vue has never been easier or more flexible.

Whether you're building a single-page app or sprinkling interactivity into Blade files, Laravel 12 + Vue 3 is a perfect combo.

🎯 What's New in Laravel 12?

✅ Option 1: Integrate Vue Using Laravel's Starter Kit

🛠️ Steps:

1. Create a New Laravel App

2. Choose Vue Starter Kit

3. Install Frontend Dependencies

4. Run the Application

🔧 Option 2: Manually Integrate Vue in Laravel 12 Using `@vitejs/plugin-vue`

🧱 Step-by-Step Guide

1. Install Vue and the Vite Vue Plugin

2. Update Vite Config (`vite.config.js`)

3. Initialize Vue in `resources/js/app.js`

4. Create a Vue Component

🧩 How to Use Vue Components Inside Blade Files

Example: `resources/views/welcome.blade.php`

📝 Best Practices

✅ Final Thoughts

Tags

Comments

Related Posts

Laravel 12 + Vue 3 Integration: The Complete Guide (Starter Kits & Custom Setup)

🎯 What's New in Laravel 12?

✅ Option 1: Integrate Vue Using Laravel's Starter Kit

🛠️ Steps:

1. Create a New Laravel App

2. Choose Vue Starter Kit

3. Install Frontend Dependencies

4. Run the Application

🔧 Option 2: Manually Integrate Vue in Laravel 12 Using @vitejs/plugin-vue

🧱 Step-by-Step Guide

1. Install Vue and the Vite Vue Plugin

2. Update Vite Config (vite.config.js)

3. Initialize Vue in resources/js/app.js

4. Create a Vue Component

🧩 How to Use Vue Components Inside Blade Files

Example: resources/views/welcome.blade.php

📝 Best Practices

✅ Final Thoughts

Tags

Comments

Related Posts

🔧 Option 2: Manually Integrate Vue in Laravel 12 Using `@vitejs/plugin-vue`

2. Update Vite Config (`vite.config.js`)

3. Initialize Vue in `resources/js/app.js`

Example: `resources/views/welcome.blade.php`