Laravel 12 with Vue.js Integration: Step-by-Step Installation Guide

Laravel 12 offers flexible options for frontend development with JavaScript frameworks like Vue.js. Much like with React, developers can choose between a modern starter kit for new projects or integrating Vue.js into an existing Laravel application using the laravel/ui package. The decision depends on project requirements—if you’re building a new project and aiming for a Single Page Application (SPA) with modern tooling, the Vue starter kit with Inertia.js is highly recommended.

For New Projects

When starting fresh, the easiest approach is to use Laravel’s Vue starter kit. This setup includes Inertia.js, which provides a smooth SPA experience by bridging Laravel’s backend with Vue’s frontend without the need for a separate API.

Installation Steps

1. Ensure Laravel Installer is Installed

   composer global require laravel/installer
   

2. Create a New Laravel Project

   laravel new my-vue-app
   

   During the interactive prompt, choose the Vue option. This selection configures your project with Vue 3, TypeScript (if you prefer), Tailwind CSS, and Inertia.js.

3. Navigate to the Project Directory

   cd my-vue-app
   

4. Install Frontend Dependencies and Build Assets

   npm install
   npm run build
   

5. Start the Laravel Development Server

   composer run dev

   Visit http://localhost:8000 to see your Vue frontend seamlessly integrated with Laravel via Inertia.js.

Key Features of This Setup

• Inertia.js Integration: Vue components are rendered directly from Laravel routes without a separate API.
• Pre-configured Authentication: Leverage Laravel Breeze which comes pre-built for authentication.
• Modern Tooling: Uses Vite for fast builds and Hot Module Replacement (HMR), Tailwind CSS for styling, and TypeScript support (if enabled).
• Component Structure: Vue components are neatly organized under resources/js/Pages, making the development process streamlined.

For Existing Projects

If you already have a Laravel 12 project and wish to integrate Vue.js, you can add it using the laravel/ui package. This option provides a simpler Vue setup that does not include Inertia.js by default, though it can be manually configured if needed.

Installation Steps

1. Install Laravel UI Package

   composer require laravel/ui
   

2. Generate Vue Scaffolding

   php artisan ui vue
   

   To include authentication scaffolding:

   php artisan ui vue --auth
   

3. Install Frontend Dependencies and Compile Assets

   npm install
   npm run dev
   

Key Features of This Setup

• Simple Vue Integration: Quickly add Vue.js to your Laravel application without overhauling your current structure.
• Blade-based DOM Integration: Vue components are injected into Blade templates (e.g., in welcome.blade.php), ideal for applications that do not require a full SPA.
• Vite Support: The setup uses Vite for asset bundling, ensuring faster builds and smoother development experience.
• Optional Inertia.js: For those who want to upgrade to a more dynamic SPA experience, Inertia.js can be added manually.

Comparison of Approaches

Additional Considerations

• Modern SPA Development: For projects aiming at a full SPA experience with Vue.js, leveraging Inertia.js simplifies routing and component rendering directly from Laravel controllers.
• Legacy Support: The laravel/ui package remains a viable option for existing applications that need to integrate Vue.js without significant refactoring.
• Styling and Performance: Tailwind CSS is integrated by default in the starter kit for a modern design approach, and Vite ensures optimal performance with faster builds and HMR.
• Customizability: Advanced users can further extend both setups by manually configuring additional Vue plugins or integrating with other frontend libraries as needed.

Conclusion

For new Laravel 12 projects, the Vue starter kit with Inertia.js is the modern, recommended approach, offering a fully integrated experience that leverages the best of Laravel’s backend and Vue’s reactive frontend capabilities. Meanwhile, for existing projects, the laravel/ui package provides a straightforward path to introduce Vue.js without major changes, making it an excellent choice for legacy applications. With robust tooling like Vite and Tailwind CSS, Laravel 12 ensures that whether you choose Vue or React, you have all the tools needed to build high-performance, modern web applications.

😀🚀🎨

Happy coding!