We have learned how to create Vue.js components and how to create and use navigation, but we are still missing one of the most important things in our project.

It’s time to get some actual data from our backend and to display it in our components. To accomplish that, we need to use the HTTP Client library and because Vue.js doesn’t have its own, we are going to use Axios. Furthermore, we need to configure Axios to send requests to our backend server depending on the environment our application is on.

For the complete series navigation visit: Vue.js Series.

To download the source code for this part, visit Axios and Environment Files Source Code.

This post is divided into several sections:

Setting up Environments

In the development mode, we need to point our HTTP requests to our local backend which is at http://localhost:5000/api. When we deploy an application to the production environment, we will point our API requests to the backend which is on the remote server and not our local backend, something like http://www.accountowner.com/api.

To implement this behavior, we need to modify our environment files.

In the config directory, we have our environment files. Let’s open the config/dev.env.js file and add a new environment variable to it:

Let’s do the same thing for the config/prod.env.js file:

Now we need to install Axios and configure it to use these variables.

Installing Axios

Let’s open a terminal and in the root of our project we are going to type:
npm i axios

After the installation finishes, we are going to open the main.js file, import Axios and configure it to use the API_ENDPOINT environment variable as a base URL for all the Axios requests.

So, let’s do exactly that:

The process is a global Node.js variable through which we can access our environment variables.

After we have finished with environment variables, it’s time to create our first API service through which we are going to gather some data from our backend.

Vue.js doesn’t have any rules about code architecture, for example, where to put services or models. We can structure a Vue.js project in a way we want because it is not aware of terms like Service, Controller or Model. We can implement any of that inside a simple .js file which we create for that specific purpose.

Creating API Service

Let’s create a new directory in our src directory and name it api-services. Then inside of it, we are going to create a new file and name it owner.service.js.

In this file, we are going to implement our Axios calls to the backend and it is recommended to create separate API service files for every entity in our database or RESTful resource.

So, let’s import Axios and implement RESTful calls in our owner.service.js file:

Just for the testing purposes, let’s import our API service in the Home.vue component and check if it works.

Fetching Data From the Backend

To verify if everything is working as it supposes to, let’s fetch some data from the backend and log it in the console. This is just for the testing purposes but in the next part of this series, we are going to actually render the fetched data in respective components.

Let’s open the src/Home.vue file, import our OwnerService in it and execute the getAll() function from it:

The created() function is a part of the Vue.js component lifecycle. It is going to be executed once the component is instantiated and all the data is set but the component’s mounting stage is still not started. We are using that hook just to verify if our OwnerService is working.

When we call any of the Axios functions in our API service, that function returns a Promise because the HTTP calls are asynchronous. So what we need to do is to return that promise from our API service and then to listen to the Promise resolve. That is the main reason why we have the .then() block after the API service call.

Excellent.

Now it is a time to see the result.

Let’s start our application with npm run dev, and type http://localhost:8080 in the web browser. Then, we are going to open DevTools (F12), switch to Console and reload our page. We should see the following result:
Welcome to Account-Owner Application - Axios HTTP Client and Environment files

Great!

We are going to delete implementation of the created() lifecycle hook because we are verified that our API service is working well.

Conclusion

Excellent, we are now ready to create new components and render this data which we get from the backend.

By reading this post you’ve learned:

  • How to work with environment files in Vue.js
  • How to install and configure Axios client
  • The way of creating api-service
  • How to make HTTP calls

In the next part, we are going to learn how to create custom components and display data fetched from the backend.