Laravel 12 and Vue 3 Ultimate Starter Guide

Laravel 12 and Vue 3 together form a powerful stack for building modern web applications. Laravel provides a robust backend framework, while Vue.js offers a reactive and flexible frontend. In this guide, we will walk through setting up a Laravel 12 project with Vue 3 using Vite, covering installation, configuration, and best practices to kickstart your development journey like a pro. Step 1: Install Laravel 12 Before proceeding, ensure that you have PHP 8.2+, Composer, and Node.js (latest LTS) installed. 1.1 Install Laravel via Composer Run the following command to create a fresh Laravel project: composer create-project --prefer-dist laravel/laravel my-laravel-app Navigate to the project directory: cd my-laravel-app 1.2 Configure Environment Duplicate the .env.example file and generate an application key: cp .env.example .env php artisan key:generate Update your .env file with database credentials: DB_DATABASE=mydatabase DB_USERNAME=root DB_PASSWORD= Then, migrate the database: php artisan migrate Step 2: Install Vue 3 and Vite Laravel 12 ships with Vite for modern asset compilation. 2.1 Install Node Modules Run: npm install 2.2 Install Vue and Additional Dependencies npm install vue@latest vue-router@latest @vitejs/plugin-vue 2.3 Configure Vite for Vue Modify vite.config.js: import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: ['resources/js/app.js'], refresh: true, }), vue(), ], }); Step 3: Set Up Vue in Laravel 3.1 Create Vue App Entry Point Modify resources/js/app.js: import { createApp } from 'vue'; import App from './components/App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); 3.2 Create a Sample Vue Component Create resources/js/components/App.vue: Welcome to Laravel 12 with Vue 3 3.3 Setup Vue Router Install Vue Router: npm install vue-router@latest Create resources/js/router/index.js: import { createRouter, createWebHistory } from 'vue-router'; import Home from '../components/Home.vue'; const routes = [ { path: '/', component: Home } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; Create resources/js/components/Home.vue: This is the Home Page Step 4: Update Blade Template Modify resources/views/app.blade.php to include Vue: Laravel 12 with Vue 3 @vite(['resources/js/app.js']) Step 5: Run the Application Compile the assets using Vite: npm run dev Start the Laravel server: php artisan serve Visit http://127.0.0.1:8000/ to see your Vue-powered Laravel app in action. Conclusion You’ve successfully set up Laravel 12 with Vue 3 using Vite! From here, you can expand your project by adding authentication, API handling, state management (Pinia/Vuex), and much more. This setup provides a solid foundation for building scalable and high-performance web applications. Happy coding!

Feb 28, 2025 - 13:11

Laravel 12 and Vue 3 Ultimate Starter Guide

Laravel 12 and Vue 3 together form a powerful stack for building modern web applications. Laravel provides a robust backend framework, while Vue.js offers a reactive and flexible frontend. In this guide, we will walk through setting up a Laravel 12 project with Vue 3 using Vite, covering installation, configuration, and best practices to kickstart your development journey like a pro.

Step 1: Install Laravel 12

Before proceeding, ensure that you have PHP 8.2+, Composer, and Node.js (latest LTS) installed.

1.1 Install Laravel via Composer

Run the following command to create a fresh Laravel project:

composer create-project --prefer-dist laravel/laravel my-laravel-app

Navigate to the project directory:

cd my-laravel-app

1.2 Configure Environment

Duplicate the .env.example file and generate an application key:

cp .env.example .env
php artisan key:generate

Update your .env file with database credentials:

DB_DATABASE=mydatabase
DB_USERNAME=root
DB_PASSWORD=

Then, migrate the database:

php artisan migrate

Step 2: Install Vue 3 and Vite

Laravel 12 ships with Vite for modern asset compilation.

2.1 Install Node Modules

Run:

npm install

2.2 Install Vue and Additional Dependencies

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

2.3 Configure Vite for Vue

Modify vite.config.js:

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

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

Step 3: Set Up Vue in Laravel

3.1 Create Vue App Entry Point

Modify resources/js/app.js:

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

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

3.2 Create a Sample Vue Component

Create resources/js/components/App.vue:

<template>
    
        Welcome to Laravel 12 with Vue 3
    
template>

3.3 Setup Vue Router

Install Vue Router:

npm install vue-router@latest

Create resources/js/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';

const routes = [
    { path: '/', component: Home }
];

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

export default router;

Create resources/js/components/Home.vue:

<template>
    
        This is the Home Page
    
template>

Step 4: Update Blade Template

Modify resources/views/app.blade.php to include Vue:




    
    
    Laravel 12 with Vue 3
    @vite(['resources/js/app.js'])

Step 5: Run the Application

Compile the assets using Vite:

npm run dev

Start the Laravel server:

php artisan serve

Visit http://127.0.0.1:8000/ to see your Vue-powered Laravel app in action.

Conclusion

You’ve successfully set up Laravel 12 with Vue 3 using Vite! From here, you can expand your project by adding authentication, API handling, state management (Pinia/Vuex), and much more. This setup provides a solid foundation for building scalable and high-performance web applications.

Happy coding!