ndling user interactions,
loading additional content, or managing client-side routing in SPAs.

By offloading the initial rendering work to the server, SSR can often lead to
optimized performance and improved SEO.

The Vue.js and Laravel partnership enables developers to build both CSR and
SSR apps. However, it’s not a one-size-fits-all affair. Instead, it unfolds a
range of integration methods, each with its own set of benefits and
challenges. The integration method you choose will play a crucial role in
determining your app's rendering technique and whether it adopts the SPA or
MPA model.

##  Method 1: Single Blade Hosting a Vue.js App

![Laravel Blade Hosting Vue.js App](https://blog.vueschool.io/wp-
content/uploads/2024/01/single-blade-vue-app.png)

In this API-driven integration method, a single Laravel blade file acts as the
host for the entire Vue.js application. Both frameworks coexist harmoniously
within the same project directory, facilitated by the power of [ Vite’s
official plugin for Vue ](https://github.com/vitejs/vite-plugin-vue) .

Despite sharing the same project directory and the same domain, this approach
still adopts separation of concerns principle, allowing Vue.js to function as
a client-side rendered application while consuming Laravel APIs.

Moreover, [ Vue Router ](https://router.vuejs.org/introduction.html) , the
official routing solution for Vue, will seamlessly manage client-side
navigation, simplifying the process of creating SPAs. If you're eager to
become a Vue Router pro, consider exploring our [ dedicated course at
VueSchool ](https://vueschool.io/courses/vue-router-4-for-everyone) . It's
designed to equip you with the skills to master Vue Router effortlessly.

###  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>
            VueSchool 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 ` ./resou