The Complete Guide to Integrating Vue.js with Laravel

When you combine Vue.js with Laravel, you create a powerful full-stack partnership that brings together the best of JavaScript and PHP. This combination allows developers to build fast, interactive single-page applications (SPAs) while taking advantage of server-side rendering. As both technologies continue to evolve, so do the ways they can be integrated for maximum efficiency.

This guide will walk you through the various methods of integrating Vue and Laravel, highlighting their strengths and weaknesses so you can choose the best fit for your project.

Before diving into the integration details, let’s first explore the key benefits this dynamic duo offers.

Benefits of Using Vue.js with Laravel

The integration of Vue.js and Laravel is more than just a convenient pairing—it’s a strategic partnership tailored to meet the demands of modern web development. Let’s explore some of the key advantages this combination offers:

• Single-Page Applications (SPAs): Vue.js injects dynamism into Laravel’s powerful backend with its reactive capabilities and virtual DOM manipulation. This makes it easy to build SPAs that deliver a seamless, fast, and native-like user experience. By eliminating page reloads and slow interactions, this combination boosts user engagement, reduces server load, and ensures a smoother overall performance.
• Hot Reloading with Vite: Both Vue.js and Laravel are compatible with Vite, which enables Hot Module Replacement (HMR). HMR allows developers to see code changes instantly in the browser without refreshing the page, significantly speeding up the development process and improving productivity.
• Server-Side Rendering (SSR): Vue.js and Laravel work together to overcome the common SEO challenges of dynamic content. Laravel handles server-side rendering to pre-render HTML for search engines, while Vue.js manages client-side interactivity. This balanced approach optimizes both SEO performance and user experience.
• Effortless State Management: Managing client-side state can be a challenge, but Vue.js simplifies this process with tools like Pinia. For those who prefer server-side state management, Inertia.js provides an efficient way to bridge the gap, ensuring smooth and organized data handling.
• Strong Community Support: Both Vue.js and Laravel are backed by vibrant, active communities that offer extensive documentation, support, and a wealth of innovative libraries and packages. This strong ecosystem empowers developers to solve challenges faster, share knowledge, and continuously evolve their skills.
• Future-Proof Development: Vue.js and Laravel are continuously updated to keep pace with the latest web technologies and trends. By using these tools, developers ensure that their applications remain adaptable and competitive, while their skills stay relevant in a rapidly changing landscape.

These benefits highlight why the Vue.js and Laravel combination is a favorite among developers for building fast, efficient, and user-friendly web applications. When harnessed effectively, this duo can create outstanding projects that stand out from the competition.

However, as Uncle Ben famously said to Spiderman, “With great power comes great responsibility.” Working with a client-side framework like Vue and a server-side framework like Laravel requires careful planning and consideration to fully unlock their potential.

To make an informed decision about integrating Vue.js with Laravel for your project, it’s essential to understand the differences between various rendering modes.

Client-Side Rendering (CSR)

In a client-side rendered application, the server’s primary role is to serve static assets like empty HTML, CSS, and JavaScript files. The actual rendering happens on the client’s browser, not on the server.

When the server responds, search engine crawlers typically receive an empty HTML document. While some crawlers can schedule a second visit to render and index the JavaScript content later, this can result in significant delays—ranging from hours to even weeks—before your content is fully indexed.

Once the browser receives the necessary assets, it begins rendering the page. The browser processes the HTML, applies CSS styling, and executes the JavaScript code. JavaScript then handles various tasks like populating the page with dynamic data, creating interactive elements, managing authentication, and enabling smooth client-side navigation, especially for single-page applications (SPAs) where page reloads are minimized.

Server-Side Rendering (SSR)

In server-side rendered applications (SSR), the server generates a fully rendered HTML page before sending it to the browser. This means the server is responsible for fetching data, rendering the content, and delivering a complete web page that is ready for immediate display.

With SSR, search engine crawlers can easily index the content without delays or the need for multiple visits, improving SEO from the start.

While the browser still executes JavaScript in SSR, its role shifts to enhancing interactivity and handling dynamic updates after the initial page load. This includes managing user interactions, loading additional content, and handling client-side routing in SPAs.

By offloading the initial rendering to the server, SSR often results in better performance and enhanced SEO.

Vue.js and Laravel give developers the flexibility to build both CSR and SSR applications. However, choosing the right integration method depends on your project’s specific needs. Each method has its own benefits and challenges, and the one you choose will determine your app’s rendering technique—whether it follows a single-page application (SPA) or multi-page application (MPA) model.

Method 1: Hosting a Vue.js App in a Single Blade Template

In this API-driven integration approach, a single Laravel Blade file serves as the host for the entire Vue.js application. Both Vue.js and Laravel coexist within the same project directory, with Vite’s official plugin for Vue managing the integration.

Although both frameworks share the same directory and domain, this method adheres to the principle of separation of concerns. Vue.js operates as a client-side rendered application, while Laravel provides the backend APIs for data consumption.

Vue Router, the official routing solution for Vue.js, handles all client-side navigation, making it easy to build single-page applications (SPAs). For those looking to deepen their understanding of Vue Router, we recommend checking out our dedicated course at WoClips, which will help you master Vue Router with ease.

Integration Guide

The first step is to craft a new Laravel project. I will use composer for this one.

composer create-project laravel/laravel example-app

The previous command installed the latest version of Laravel (currently v10.10). Next, we install Laravel related npm dependencies.

npm install

Now, we’re ready to invite Vue to the party.

npm install vue@next vue-router@4 @vitejs/plugin-vue

The previous command installed the latest version of Vue, Vue Router and Vite’s official plugin for Vue 3.

// package.json
"dependencies": {
    "@vitejs/plugin-vue": "^4.6.0",
    "vue": "^3.2.36",
    "vue-router": "^4.2.5"
}

To start using Vue in Laravel, we should add Vite’s plugin for Vue to the plugins array inside vite.config.js file. The final code will look like this:

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,
        }),
    ],
    resolve: {
        alias: {
            vue: "vue/dist/vue.esm-bundler.js",
        },
    },
});

Head to ./resources/js and create a new file App.vue . This file will serve as an entry point for our Vue.js application.

<template>
    <h1>
        WoClips Rocks! 
    </h1>
</template>

Time to create a new Vue app instance in our Laravel project. To do so, we’ll need to modify ./resources/js/app.js file and add the following

import "./bootstrap";
import { createApp } from "vue";

import App from "./App.vue";

createApp(App).mount("#app");

This will mount our Vue app inside an element with the id of “app”. Let’s create that <div> within the <body> of ./resources/views/welcome.blade.php file. This Blade file containing our Vue app, is the only Laravel file that will be exposed to the browser.

<body>
    <div id="app"></div>
</body>

We also have to import our ./resources/js/app.js file using the @vite() Blade directive.

<head>
    @vite(['resources/js/app.js'])
</head>

<body>
    <div id="app"></div>
</body>

With just that, we got Vue working with Laravel 🥳 We can test it by running npm run dev and php artisan serve

We still need to make it a dynamic single-page application. To achieve this, we will use Vue Router. Let’s create a new file ./resources/js/router.js to define the router :

import { createRouter, createWebHistory } from "vue-router";

const routes = [];

export default createRouter({
    history: createWebHistory(),
    routes,
});

Next step, integrate the router we just created with our Vue instance inside ./resources/js/app.js file

import "./bootstrap";
import router from "./router/router";
import { createApp } from "vue";

import App from "./App.vue";

createApp(App).use(router).mount("#app");

So, now we need a ./resources/js/Pages/ directory that will contain our route components. We first create ./resources/js/Pages/HomeRoute.vue with a router-link to test internal navigation when we’re done:

<template>
    <div>
        <h1>HOME</h1>
        <router-link to="/test"> Take me to Test page </router-link>
    </div>
</template>

Then we create ./resources/js/Pages/TestRoute.vue

<template>
    <h1>I'm here to test!</h1>
</template>

Next, Lazy load the new route components in the router’s file ./resources/js/router.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path: "/",
        component: () => import("./Pages/HomeRoute.vue"),
    },
    {
        path: "/test",
        component: () => import("./Pages/TestRoute.vue"),
    },
];

export default createRouter({
    history: createWebHistory(),
    routes,
});

It’s worth mentioning that we can use [unplugin-vue-router package](https://github.com/posva/unplugin-vue-router?tab=readme-ov-file) to enable file based routing feature. But for this tutorial, we’ll stick with the official Vue Router approach.

Finally, we tweak the code inside the Vue entry file to make it dynamic. Luckily, Vue Router provides RouterView built-in component, which exposes slots that we can leverage to dynamically render route components.

Head to ./resources/js/App.vue and modify it as follows:

<template>
    <router-view v-slot="{ Component, route }">
        <div :key="route.name">
            <Component :is="Component" />
        </div>
    </router-view>
</template>

Now if we hit npm run dev and php artisan serve in the terminal, click on the link to navigate to /test , we will find it working as expected with client-side navigation. But here’s the catch, if we do a hard refresh, Laravel will return a “404 Not Found” error. This is happening because we don’t have web routes defined in Laravel.

To overcome this challenge, we can head to ./routes/web.php and define a single route that will catch all valid routes and use the Blade entry file which contains our Vue application.

Route::get('/{vue_capture?}', function () {
    return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');

With that done, hard refresh won’t ruin our application anymore. However, it’s worth mentioning that 404 pages still need to be handled using Vue Router. You can follow the instructions in the “404-not-found-page” free lesson at Woclips to handle this scenario like a pro.

At this point, we still don’t have a communication channel between Vue’s client-side components with Laravel backend. For this, we can use axios as our promise-based HTTP client for the browser.

npm install axios

Let’s quickly craft a testing API endpoint in Laravel and consume it from a Vue component. Inside ./routes/api.php , we will add a new API endpoint

Route::get("/test-me", function () {
    return 'Hello from Laravel!';
});

We’ll then consume this new API endpoint from ./resources/js/Pages/HomeRoute.vue component using axios. Let’s prepare a button that will trigger getValue() function which will fire a get request to the endpoint. I’ll also create a ref to store the response value.

<template>
    <div>
        <h1>HOME</h1>
        <router-link to="/test"> Take me to Test page </router-link>
        <button @click.prevent="tiggerEndpoint">Trigger Endpoint</button>
        <p v-if="response">{{ response.data }}</p>
    </div>
</template>

Finally, we’ll use script setup to create the function and variable ref

import axios from "axios";
import { ref } from "vue";

const response = ref();

const getValue = async () => {
    try {
        response.value = await axios.get("/api/test-me");
    } catch (error) {
        // Do something with the error
        console.log(error);
    }
};

When we run the app, and once the button is clicked, the getValue() function will trigger the test-me endpoint and the response will be displayed in the browser.

Summary

Here are some advantages and challenges of integrating Vue with Laravel by nesting Vue in a single Blade file:

Advantages:

• Vue.js and Laravel share the same domain and the same git repository.
• Both frameworks coexist in the same project but are neatly organized in separate directories.
• The application is a client-side rendered, single-page application.
• No need to create Laravel web routes; Vue Router handles client-side navigation, and Axios fetches data from Laravel APIs.
• If a mobile application is needed, the same API endpoints can be used for data retrieval and manipulation.

Challenges:

• Search engines depend on a delayed second wave of indexing, which may take from hours to weeks.
• Page content may experience longer load times since the browser is responsible for client-side processing and rendering.
• Client-side management of navigation, route guards, and other routing-related tasks introduces additional complexity to Laravel developers.