Axios

To perform AJAX requests to the web service, we'll use the Axios HTTP client, which is included with Laravel's default frontend code. Axios has a very simple API allowing us to make requests to a GET URL like this:

axios.get('/my-url');

Axios is a Promise-based library, so in order to retrieve the response, you can simply chain a then callback:

axios.get('/my-url').then(response => {
  console.log(response.data); // Hello from my-url
});

As the Axios NPM package is already installed, we can go ahead and import the HomePage component. We can then use it to perform the request to the home API endpoint, /api/. In the then callback, we apply the returned data to the component instance exactly as we did with the inlined model.

resources/assets/components/HomePage.vue ...

Get Full-Stack Vue.js 2 and Laravel 5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.