How to Add Vue.js in Laravel 11

Integrating Vue.js with Laravel 11 allows developers to build modern, dynamic web applications with smooth user interactions. Vue.js is a progressive JavaScript framework used for building user interfaces, and Laravel is one of the most popular PHP frameworks for backend development. Combining these two powerful tools will enable you to create full-stack applications seamlessly.

In this blog post, we will explore how to set up Vue.js in a Laravel 11 project step by step.

How to Install Node.js on an Ubuntu 22 Server

Why Use Vue.js with Laravel?

Vue.js is known for its simplicity and versatility. It helps to create reactive interfaces, which are more user-friendly and engaging. Laravel, on the other hand, offers a strong foundation for server-side logic, routing, and database management. Together, Vue.js and Laravel create a powerful combination for building full-stack applications. Here are some reasons why Vue.js and Laravel make a perfect match:

• Reactive Components: Vue.js enables you to build reusable components that can react to data changes dynamically, which leads to a more responsive user experience.
• Seamless Integration: Vue.js can be easily integrated with Laravel’s Blade templates or used as a standalone front-end framework.
• Improved Performance: Vue.js optimizes reactivity and minimizes page reloads, making web applications faster and more efficient.
• Front-End Flexibility: Vue.js allows for fine-tuned control over the front-end experience, offering flexibility in building custom UIs.

Now, let’s dive into how to set up Vue.js in a Laravel 11 project.

Prerequisites

Before you begin, make sure you have the following installed on your system:

• Node.js (Download from nodejs.org)
• NPM (Node Package Manager, which comes with Node.js)
• Composer (For managing Laravel dependencies)
• Laravel 11 (Installed using Composer)

If you haven’t installed Laravel 11, you can do so by running:

composer create-project laravel/laravel laravel-vue-example

This will create a new Laravel project in the directory laravel-vue-example.

Step 1: Install Laravel Mix

Laravel Mix is a wrapper around Webpack, providing a fluent API for defining Webpack build steps. It simplifies the integration of front-end libraries like Vue.js.

In Laravel 11, Laravel Mix comes pre-installed, but it’s essential to make sure that all necessary dependencies are available.

Run the following command to install Node modules and ensure that Laravel Mix is set up correctly:

npm install

This command will install all the required Node packages, including Laravel Mix.

Step 2: Install Vue.js

Laravel comes pre-configured with some Vue.js settings out of the box, but it may not include the latest Vue.js version. To ensure you are working with the latest version of Vue.js, you need to install it manually.

Run the following command in the root of your Laravel project:

npm install vue@next

This will install Vue.js 3, which is the most recent version of the framework.

If you’re using Vue 2.x, you can specify the version like so:

npm install vue@2

For this tutorial, we will use Vue 3.

Step 3: Set Up Laravel Mix for Vue.js

Now, let’s configure Laravel Mix to work with Vue.js. Open the webpack.mix.js file located in the root directory of your Laravel project.

Modify the file to include Vue.js by adding the following line:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .vue()  // Add this line to enable Vue.js support
   .sass('resources/sass/app.scss', 'public/css');

The .vue() method tells Laravel Mix to handle .vue files properly using Vue’s build tools.

Step 4: Configure Vue.js in Laravel

In Laravel 11, Vue.js is not automatically included in your app.js file, so you need to import it manually. Open the resources/js/app.js file and modify it as follows:

import { createApp } from 'vue';

// Import your components or create a new one
import ExampleComponent from './components/ExampleComponent.vue';

// Create a Vue application and mount it to an element
const app = createApp({});

// Register components globally or locally
app.component('example-component', ExampleComponent);

// Mount the app to a specific element in your HTML (like a div with id 'app')
app.mount('#app');

This code creates a new Vue.js application and registers a component called ExampleComponent. It then mounts the Vue application to an element with the ID app.

Step 5: Create Vue Components

Vue components are reusable pieces of UI logic that you can insert into your application. Let’s create a simple example Vue component to test your setup.

In your resources/js/components/ directory, create a new file called ExampleComponent.vue:

<template>
    <div class="example">
        <h1>{{ message }}</h1>
        <button @click="changeMessage">Click me!</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello from Vue.js!',
        };
    },
    methods: {
        changeMessage() {
            this.message = 'Message changed!';
        }
    }
}
</script>

<style scoped>
.example {
    text-align: center;
}
</style>

This simple Vue component displays a message and changes the message when the button is clicked.

Step 6: Integrate Vue Component into Blade Template

Next, we need to add the Vue component to our Laravel Blade template. Open your main Blade file, usually resources/views/welcome.blade.php, and update it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue Example</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <div id="app">
        <example-component></example-component>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Here, we include the Vue component using the <example-component></example-component> tag, and the Vue app will mount to the div with the id="app".

Step 7: Compile Assets

Now that everything is set up, you need to compile your assets using Laravel Mix. Run the following command in your terminal:

npm run dev

This command will compile your JavaScript and CSS files, making them ready for the browser.

If you want to compile your assets for production, use:

npm run production

This will optimize your assets for faster loading in a production environment.

Step 8: Verify the Integration

After running the compilation, navigate to your Laravel application in the browser:

http://localhost:8000

If everything is set up correctly, you should see your Vue.js component with the message and button. When you click the button, the message will change, indicating that Vue.js is working properly within your Laravel application.

Step 9: Hot Module Replacement (Optional)

If you’re actively developing the front-end with Vue.js, you may want to use Hot Module Replacement (HMR) for a better development experience. HMR updates modules in real-time without refreshing the entire page.

You can enable HMR by running:

npm run hot

Then, access your application at the following URL:

http://localhost:8080

This setup will enable live reloading when you make changes to your Vue components.

Conclusion

In this tutorial, we covered how to set up Vue.js in a Laravel 11 project step by step. By combining Laravel’s backend capabilities with Vue.js’s front-end reactivity, you can build powerful, modern web applications.

• Install Vue.js: Install the latest version of Vue.js using NPM.
• Configure Laravel Mix: Set up Laravel Mix to handle Vue.js files.
• Create Vue Components: Build reusable Vue components in your project.
• Integrate with Blade: Use Laravel’s Blade templates to render Vue components.
• Compile and Test: Compile assets using Laravel Mix and verify the Vue.js integration.

Now, you’re ready to start building interactive, reactive web applications with Vue.js and Laravel 11!

Check My Social Profile Links

Instagram

Youtube

Website

Linkedin

Android Application

About The Author