How to Use Laravel with Vue.js: Building Modern Web Apps

The web development landscape is constantly evolving, demanding ever-more engaging and dynamic user experiences. That means using Laravel with VueJS when creating the websites.

Laravel, with its robust backend scaffolding and API capabilities, provides a secure and efficient foundation. VueJS, on the other hand, shines in building dynamic UIs with its reactive, component-based architecture. Web experts use them to create web pages and sites that are only secure and maintainable but also interactive and user-friendly.

But how do you use Laravel with VueJS? Well, before I answer that, let’s see the overview of these technologies and why you might want to use them together.

Overview of Laravel and VueJS

Laravel is a PHP framework that provides a robust and elegant foundation for building web applications. It simplifies development by offering pre-built components and tools. They can handle tasks like routing, authentication, database interactions, and security.

Laravel embraces the Model-View-Controller (MVC) pattern, promoting clean code organization and separation of concerns. Its built-in ORM (Object-Relational Mapper) streamlines database interactions with an expressive and intuitive syntax.

It also includes a command-line tool called Artisan. It provides a range of commands for tasks such as database migrations, testing, and code generation.

VueJS is one of the top JavaScript frameworks for building user interfaces. It focuses on simplicity and flexibility. It allows developers to create dynamic and interactive web experiences with ease. VueJS encourages building user interfaces using reusable components, promoting modularity and maintainability.

VueJS uses a virtual DOM to optimize rendering and enhance performance. It simplifies data binding between components and the DOM, enabling dynamic updates and reactive user interactions. To achieve a smooth frontend-backend connection, developers often integrate VueJS with Laravel for seamless setup and efficient application development.

To create dynamic user experience in websites and web apps, professionals often use Laravel with VueJS. But why? We’ll find out in the next section. But first, let’s see how to integrate Laravel and VueJS.

How to Use Laravel with VueJS?

Creating dynamic web apps through Laravel integrated with VueJS involves a step-by-step process. You must follow each step carefully to avoid any issues later. Below is a detailed look at the process.

Set Up Laravel Project

For this setup, we’re assuming you already have Laravel installed on your PC. But just in case you don’t, follow this step of the process.

Step 1: Install Laravel

Make sure you have Composer installed for dependency management. After that, open a terminal window (Command Prompt on Windows, Terminal on macOS/Linux). Navigate to the directory where you want to create your Laravel project.

Run the following command in your terminal:

composer create-project laravel/laravel my-app

Replace my-app with your desired project name. This command will download Laravel’s core files and create a new directory named my-app containing your project structure.

Step 2: Configure Database

On most web hosting platforms, you can create a database through your control panel. For local development, tools like XAMPP or MAMP often come with built-in database management interfaces. Remember the database name, username, and password you choose, as you’ll need them later.

Navigate to the .env file in your Laravel project directory. This file stores environment variables like database credentials. Update the following lines with your chosen database details:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

Update this information with your specific credentials with respect to the host and database.

Step 3: Create Models, Controllers, and Routes

These are the building blocks of your Laravel application. Models represent your data entities (e.g., users, posts, products). Use Artisan, Laravel’s command-line interface, to create models:

php artisan make:model User

Then there are controllers, which handle user requests and interact with models. Create controllers with Artisan:

php artisan make:controller UserController

Finally, Routes define how URLs map to specific controller actions. Configure routes in the routes/web.php file.

Step 4: Implement CRUD Operations

CRUD stands for Create, Read, Update, and Delete. These are the core operations your application likely needs to perform on its data. Write code in your controllers to handle each of these actions.

Use Laravel Eloquent ORM to interact with the database and implement CRUD operations in your controllers.

Set Up Vue 3 within Laravel

After setting up Laravel and bootstrapping your project, the next thing to do is to integrate Vue 3. Laravel now uses Vite as its default frontend bundler, offering faster builds, hot module replacement, and a smoother development experience. Below are the detailed steps of the process:

Step 1: Install Vue 3 and Essential Dependencies

Open a terminal in your Laravel project directory and install Vue 3 and the required loader:

npm install vue vue-loader

You can also install any additional dependencies your frontend may need later. Once done, make sure to run:

npm install

This ensures all frontend packages are properly configured.

Step 2: Configure Vite for Vue

Vite replaces the older Laravel Mix setup. It’s faster, more modern, and comes pre-configured in Laravel 10 + projects.

Install the official Vue plugin for Vite:

npm install @vitejs/plugin-vue

Then, open the vite.config.js file in your project root and configure it as follows:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

This configuration tells Vite to compile your Vue components and automatically refresh the browser whenever changes are detected.

Step 3: Create and Register Vue Components

Inside your Laravel project, create a new directory for Vue components:

resources/js/components

Add your first Vue component, for example Welcome.vue:

<template>
  <h1>Welcome to Laravel + Vue 3!</h1>
</template>
<script>
export default {
  name: "Welcome",
};
</script>
<style scoped>
h1 {
  color: #42b983;
  text-align: center;
}
</style>

Next, open resources/js/app.js and register your component using the Vue 3 composition API:

import './bootstrap';
import { createApp } from 'vue';
import Welcome from './components/Welcome.vue';
createApp({
    components: { Welcome },
}).mount('#app');

This code initializes a Vue app and mounts it on an element with the ID app.

Step 4: Integrate Vue into Blade Templates

Laravel utilizes the Blade templating engine, making it easy to integrate your Vue components. Open your main Blade view (for example, resources/views/welcome.blade.php) and add the following code:

<div id="app">
    <Welcome />
</div>
@vite('resources/js/app.js')

Here, @vite automatically includes the compiled assets generated by Vite. When you modify your Vue files, Vite instantly updates your browser through hot module reloading.

Enhance Your UI with Vuetify 3 (Optional)

To style your Vue components, you can use Vuetify 3, a high-quality UI framework. Vuetify 3 is a modern Material Design library designed for Vue 3.

Step 1: Install Vuetify

Run the following command:

npm install vuetify@next

Step 2: Configure Vuetify

Create a new file resources/js/vuetify.js and configure your theme:

import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
const customTheme = {
    dark: false,
    colors: {
        primary: '#673AB7',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        success: '#4CAF50',
        warning: '#FFC107',
    },
};
export default createVuetify({
    components,
    directives,
    theme: {
        defaultTheme: 'customTheme',
        themes: { customTheme },
    },
});

Then, update app.js to include Vuetify:

import './bootstrap';
import { createApp } from 'vue';
import vuetify from './vuetify';
import Welcome from './components/Welcome.vue';
createApp({
    components: { Welcome },
})
.use(vuetify)
.mount('#app');

Step 3: Test Vuetify Integration

Modify your Welcome.vue to include a Vuetify button:

<template>
  <div>
    <h1>Welcome to Laravel + Vue 3 + Vuetify!</h1>
    <v-btn color="primary">Click Me</v-btn>
  </div>
</template>

If you configure everything correctly, you’ll see your styled Vuetify button appear alongside your welcome message.

API Integration

API integration plays a crucial role in modern web applications. It allows you to exchange data between your Laravel backend and VueJS frontend seamlessly.

Step 1: Create API Endpoints

Define API routes in your Laravel routes/api.php file. These routes will handle requests from your VueJS components. Develop controllers to handle API requests. These controllers should return data in a format like JSON.

Implement authentication and authorization mechanisms to protect your API endpoints.

Step 2: Use Axios or Fetch API

Two of the most popular tools to make requests to your Laravel API endpoints are Axios and Fetch API.

• Axios: A popular HTTP client library for JavaScript. Install it using npm install axios.
• Fetch API: A native browser API for making HTTP requests.

Each option has its advantages and complexities. Choose the one that best suits your project’s needs. Pass the URL of the endpoint and any necessary data (e.g., headers, body) as arguments to the request function.

Manage the response data in your component. Update the UI with the information you get. Test API endpoints to ensure they work well. To understand API integration and data flow, learn to build a marketplace with Vue and Laravel. This will help you create a responsive and interactive app.

Run and Test the Application

Start the Laravel backend server:

php artisan serve

Then, in a new terminal, start the Vite development server:

npm run dev

Now, visit http://localhost:8000 (or the address shown in your terminal).

You should see your Laravel application running with Vue 3 and Vite integrated.

Explore and Debug

Navigate through the different pages and features of your website or web app. Observe how VueJS components dynamically update the UI based on user interactions and data changes. Utilize the Laravel development tools in your browser to inspect console logs and debug any issues that might arise.

After you are satisfied with the local development website or web app, it is safe to deploy it on the live server. Choose a hosting provider and follow their specific instructions for deploying Laravel applications. Remember to configure your server environment appropriately for VueJS integration.This process can be quite technical with the different steps involved. So we suggest you opt for our professional Laravel development services. We’ll take your requirements into account and integrate Laravel with VueJS accordingly. But what kind of benefits will that entail? Let’s take a look.

Why Integrate Laravel with VueJS?

Combining the robust backend of Laravel with the dynamic frontend of VueJS unlocks a world of benefits for developers and users alike. Here are a few key ones:

• Separation of Concerns: Laravel handles backend logic, server-side rendering, and API development. VueJS manages the frontend, including user interfaces, views, and client-side interactivity. This separation of concerns enhances code organization and maintainability.
• Improved User Experience: VueJS excels in creating dynamic and interactive user interfaces. By integrating VueJS with Laravel, developers can build SPAs (Single Page Applications) with seamless navigation, real-time updates, and a more engaging user experience.
• Reactivity and Real-Time Updates: VueJS’s reactivity system allows automatic updates to the user interface when the underlying data changes. Real-time updates can be easily implemented in conjunction with Laravel broadcasting for features like live notifications and chat applications.
• Component-Based Development: VueJS promotes a component-based architecture, making it easy to create reusable and modular UI components. Laravel Mix simplifies the process of incorporating VueJS components into the Laravel application.
• Efficient Development Workflow: Laravel provides tools like Artisan for command-line tasks, Eloquent ORM for database interactions, and routing. VueJS, with its clear syntax and component-based structure, enhances the frontend development workflow.
• Scalability: Laravel and VueJS are both scalable technologies, making it easier to handle the growth of applications over time. Laravel’s MVC architecture and VueJS’s component-based structure contribute to scalability.
• Rich Ecosystem: Laravel and VueJS have active and supportive communities, offering extensive documentation, tutorials, and plugins. Laravel Mix simplifies asset compilation and provides an easy way to integrate VueJS components.
• Code Reusability: VueJS’s component-based architecture encourages the creation of reusable UI components. Laravel’s backend API can serve data to multiple frontend instances, promoting code reusability.
• Performance Optimization: Laravel, with its caching mechanisms and optimization features, can enhance server-side performance. VueJS, being a lightweight frontend framework, contributes to efficient client-side rendering.
• Rapid Prototyping: The combination of Laravel and VueJS is well-suited for rapid prototyping and the development of minimum viable products (MVPs).

These are some of the key reasons many developers choose to integrate Laravel with VueJS for building high-performing web applications. For those seeking an alternative approach to creating dynamic and interactive interfaces, understanding how to use Laravel With React.js provides valuable insights into combining Laravel’s backend strength with React’s frontend flexibility.

So if you feel like this combination might be worth its weight in gold for your website, follow the process shown in the previous section.

Let’s Conclude

Integrating Laravel and VueJS can help you craft modern, dynamic, and interactive web applications. You are, essentially, combining the robust backend capabilities of Laravel with the sleek frontend possibilities of VueJS. That helps create user experiences that are not only secure and scalable but also engaging and responsive.

Here’s how you use Laravel with VueJS:

• Install Laravel
• Configure Database
• Create Models, Controllers, and Routes
• Install VueJS
• Create Vue Components
• Configure Mix
• Compile Assets
• Create API Endpoints
• Use Axios or Fetch API
• Access the Application

If you want a dynamic yet creative website or web application with the combination of Laravel and VueJS, hire Laravel developers with us today!

FAQs on Using Laravel with VueJS

Mayur Upadhyay

Leading digital transformation projects with precision and creativity, Mayur turns complex ideas into results-driven web solutions. As Project Leader at WPWeb Infotech, he leverages his expertise in Laravel, PHP, Shopify, and Drupal to deliver innovation, scalability, and long-term success.