DEV Community

Cover image for Laravel 12 and Vue 3 Ultimate Starter Guide
Engineer Robin 🎭
Engineer Robin 🎭

Posted on

Laravel 12 and Vue 3 Ultimate Starter Guide

#laravel #vue #programming #tutorial

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
Enter fullscreen mode Exit fullscreen mode

Navigate to the project directory:

cd my-laravel-app
Enter fullscreen mode Exit fullscreen mode

1.2 Configure Environment

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

cp .env.example .env php artisan key:generate
Enter fullscreen mode Exit fullscreen mode

Update your .env file with database credentials:

DB_DATABASE=mydatabase DB_USERNAME=root DB_PASSWORD=
Enter fullscreen mode Exit fullscreen mode

Then, migrate the database:

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Laravel 12 and Vue 3 Ultimate Starter Guide

Step 2: Install Vue 3 and Vite

Laravel 12 ships with Vite for modern asset compilation.

2.1 Install Node Modules

Run:

npm install
Enter fullscreen mode Exit fullscreen mode

2.2 Install Vue and Additional Dependencies 

npm install vue@latest vue-router@latest @vitejs/plugin-vue
Enter fullscreen mode Exit fullscreen mode

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(), ], });
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

3.3 Setup Vue Router

Install Vue Router:

npm install vue-router@latest
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Create resources/js/components/Home.vue:

<template> <div> <h2>This is the Home Page</h2> </div> </template>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Step 5: Run the Application

Compile the assets using Vite:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Start the Laravel server:

php artisan serve
Enter fullscreen mode Exit fullscreen mode

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

Laravel 12 and Vue 3 Ultimate Starter Guide

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)