in the [ “404-not-found-page” free lesson
](https://vueschool.io/lessons/404-not-found-page) at VueSchool 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
](https://github.com/axios/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. 

##  Method 2: Decoupled Vue.js and Laravel Integration

![Separate Laravel and Vue Projects](https://blog.vueschool.io/wp-
content/uploads/2024/01/decoupled-vue-laravel-integration.png)

This is also an API-driven approach that shares a similar outcome to Method 1,
crafting a dynamic single-page application powered by Vue.js and Laravel.
However, it takes the separation of concerns to a new level, treating Vue.js
and Laravel as entirely independent projects.

###  Integration Guide

The Integration mirrors the implementation of Method 1 conceptually, the key
difference lies in the independence of Vue.js and Laravel. Both frameworks
live as separate projects and are deployed on different domains. Vue takes
full ownership of the application's structure and rendering, while Laravel
becomes an API powerhouse, crafting dedicated endpoints for dynamic data
exchange and interactions.

So, the steps to implement your project with this approach is as follows:

  1. **Create distinct projects:** Create a standalone Vue.js app and a separate Laravel app. 
  2. **Craft dedicated APIs:** Within Laravel, design API endpoints to serve data