Vue JS is a framework that stands out for its simplicity and ease of learning. However, it is also a very powerful and robust framework. And when we talk about Web applications, a growing trend is the connection of our frameworks with an API. You may have asked yourself: “How to make this connection with Vue JS?” That’s what we will talk about in this article!
We will base our discussion on the project we developed in the article Vue JS - Introduction and Creating Your First Project.
In addition, we will use the API we developed in the article Creating PHP API with Laravel and PostgreSQL.
This will be interesting because we will see in practice how the connection of two different systems, with two different languages, occurs through the API.
To get started, let's start our API server in Laravel using the command php artisan serve. This command will return the following response:
Now let's access our HTML file that is using Vue and make the necessary adjustments.
Listing Users
The first adjustment we need to make is in the layout. Our API has the email field in its structure, but our HTML does not. We will add one more tag to also display the email of each registered user:
<input type="text" v-bind:value="user.email" v-on:change="setUser($event.target.value, user.id)">
Excellent! Now we can start implementing the API calls in our code. For this, we will use a JavaScript library called Axios. This library is becoming increasingly known due to the ease of its configuration and implementation. Furthermore, it makes requests based on promises, which helps us have truly asynchronous code.
The implementation of Axios in our project is quite simple, just like implementing Vue. Just add a