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>
<div>
<h1>Welcome to Laravel 12 with Vue 3</h1>
</div>
</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>
<div>
<h2>This is the Home Page</h2>
</div>
</template>
Step 4: Update Blade Template
Modify resources/views/app.blade.php to include Vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 12 with Vue 3</title>
@vite(['resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>
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! 🚀
Top comments (0)