How to Add Vue.js 3 into Laravel 11

Setting up Laravel 11 with Vue.js involves several steps to integrate the backend framework (Laravel) with the frontend framework (Vue). Here is a detailed step-by-step guide.

Prerequisites

Before starting, make sure you have the following installed on your machine:

PHP >= 8.1
Composer (PHP package manager)
Node.js and npm (JavaScript runtime and package manager)
Git (optional, for version control)

Step 1: Install Laravel 11

Open your terminal and run the following command to create a new Laravel project:

   composer create-project laravel/laravel example-app

Navigate into the project directory:

   cd example-app

Run the Laravel development server to ensure everything works:

   php artisan serve

Visit http://localhost:8000 in your browser. You should see the Laravel welcome page.

Step 2: Install and Configure Vue.js

Install Laravel Breeze (optional but recommended). This will provide authentication scaffolding along with Vue.js.

   composer require laravel/breeze --dev
   php artisan breeze:install vue

Install Node.js dependencies:

   npm install

Build your frontend assets:

   npm run dev

This will compile the Vue.js components and other frontend assets.

Step 3: Configure Vite for Vue.js in Laravel

Laravel 11 uses Vite for asset bundling instead of Laravel Mix. The Vue configuration is already included when using Breeze, but you can also configure it manually.

Open vite.config.js and ensure the following settings are present:

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

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

Install the Vue plugin for Vite:

   npm install @vitejs/plugin-vue

Step 4: Create Vue Components

Create a new Vue component inside resources/js/Components: resources/js/Components/ExampleComponent.vue:

   <template>
     <div>
       <h1>Hello from Vue.js!</h1>
       <button @click="sayHello">Click Me</button>
     </div>
   </template>

   <script>
   export default {
     methods: {
       sayHello() {
         alert("Hello from Vue.js!");
       },
     },
   };
   </script>

   <style scoped>
   h1 {
     color: blue;
   }
   </style>

Import and use this component inside resources/js/app.js: resources/js/app.js:

   import { createApp } from 'vue';
   import ExampleComponent from './Components/ExampleComponent.vue';

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

Update the Blade template to include this Vue component: resources/views/welcome.blade.php:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Laravel with Vue.js</title>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
   </head>
   <body>
     <div id="app">
       <example-component></example-component>
     </div>
   </body>
   </html>

Step 5: Run the Application

Rebuild the frontend assets:

   npm run dev

Run the Laravel development server:

   php artisan serve

Open http://localhost:8000 in your browser. You should see your Vue component rendered with the button that triggers an alert.

Step 6: Enable Hot Reloading (Optional)

If you want hot reloading for better development experience, open another terminal tab and run:

npm run dev

This ensures that changes to your Vue components or frontend assets will be reflected immediately without needing a page refresh.

Troubleshooting Tips

Dependencies Issue: If you face errors while installing npm packages, try:

   npm install --force

CORS Issues: If you’re making API calls between Laravel and Vue, ensure that you handle CORS properly by configuring the Laravel cors.php file.
Production Build: For production, you need to build assets with:

   npm run build

Conclusion

You have now successfully set up Laravel 11 with Vue.js! With this setup, Laravel will handle your backend logic, while Vue.js will handle the frontend. You can create components, handle events, and even build SPAs (Single Page Applications) using this stack.