Vue Axios Tutorial

Posted on  by admin

Axios is an excellent http client library. It uses promises by default and runs on both the client and the server. Axios is an impressive HTTP client library that lets you asynchronously issue HTTP requests to interact with REST endpoints.

Consume REST APIs and make HTTP Requests is easy with Axios and Vue.js.

We will use Axios to send an HTTP request to the Node.js server and fetch the data from the database and display it on the client-side. We will make GET and POST request to the Node.js server.

Step 1: Install Vue.js.

At the backend, we will use the Express web framework. Okay, so first, we need to install Vue.js using CLI. If you are not familiar with Vue cli, then please check out this Vue cli Tutorial.

If you have not installed the vue cli, then type the following command.

Creating the Vue Front-End

Now type the command to generate the Vue project. It will create a necessary boilerplate for us to work with it. Go to the command line terminal and type the following command.

It will install the module and update the package.json file.

Now, we need to configure the vue-router for our application. First, create one component inside the components directory and call that file AddTicket.vue.

Now, import this component inside src >> main.js file.

Also include the Vue-router module inside the main.js file as well.

So we can define and register our routes to the Vue application. So what I have done is define one routes object, which is an array of different routes with its component, and pass that object to the VueRouter module.

How to get data with axios.get

Now that whole object is registered to the Vue application. So if you switch to this URL: http://localhost:8080/add, You can see our /add route is working.

Now, add the following code inside AddTicket.vue file.

Also, add the Bootstrap CDN inside the public >> index.html file.

Step 2: Install the Vue-router package.

Now, you can see that our bootstrap classes are working on our form.

How to handle errors in Axios

Create a new folder outside the vue project called exp-api. Inside that folder, first, create a package.json file by typing the following command.

Install the following dependencies. Also, install the nodemon as a devDependencies. Add the start script inside a package.json file. Create a server.js file inside the project root and add the following code inside a server.js file.

The next thing is we need to create the MongoDB database and connect it with our express application.

Note: You need to have installed MongoDB database on your server or local otherwise, first, you need to download it and start the MongoDB server.

Create one config folder inside project root. In that, create one file called DB.js. Now, we need to create two folders inside a root called exproutes and models.

In the models folder, create one model called Ticket.js. Now, define the two routes for our application, and that is GET and POST. So inside the exproutes folder, make one file called ticket.route.js file.

With Server-Side Rendering

Now, register these routes to the Express web application. So our final server.js file looks like this. First, install the axios via the following command.

Now, use this module inside src >> main.js file. Now, we can use the axios module inside AddTicket.vue component. Write the following code inside AddTicket.vue file. We have used axios’s post method to send the data to the Node.js server.

Node.js then saves this data into the database. Now, we need to display the tickets. So create one component inside the components folder called TicketView.vue.

Now, register this component and its route inside the vue application. So go to the main.js file and import this component and add it to the routes array.

Alternative Patterns

We have used the Lifecycle method called created(). When this component loads, this method is by default called.

So we have to fetch the data at that time. So after the component is built, we can get the data from the server. Now, display the data.

Okay, now go to http://localhost:8080/index. You can see that we can able to fetch the data from the database.

So this is how you can use Axios Promise-based library. Finally, our Vue js Axios Tutorial is over.

Axious is a promise-based modern http client library that runs on the browser and the server through Node.js.

Axios works asynchronously and allows you to make HTTP calls to REST endpoints and consume REST APIs. We’ll use Axios to send API or HTTP calls (We’ll write code for sending GET, POST, DELETE and PUT HTTP requests.) from a Vue.js interface to a RESTful API back-end built with Django. First things first, let’s get the back-end code. In this tutorial, we’ll be focusing on building the Vue.js and Axios front-end so we’ll be using a previously built Django API available from this GitHub repository.

More Vue Tutorials

Using the following command, you can clone the back-end code:. Next, you need to create a virtual environment and install packages using pipenv:.

Next, activate the virtual environment using:. Finally, create and migrate the database and run the local development server using:. You server will be running from http://localhost:8000.

Base Example

You are now ready to create the Vue.js interface to communicate with the back-end using the Axios HTTP client. Navigate inside your project and create a front-end project using the Vue CLI we’ve installed on the previous tutorial.

You now have a Vue project ready. You can serve your application using the following command:.

Consuming The RESTful API Using Axios

The next step is to install Axios in your Vue project using the following command:. After installing Axios, we’ll use it to consume to RESTful API exposed from http://localhost:8000.

To encapsulate all the code interfacing with REST API server we’ll create a JavaScript class inside the frontend project and we’ll add different methods to send API calls such as POST, GET, PUT and DELETE.

Vue and Axios Post Example

Go ahead and create APIService.js inside the frontend/src folder:. Next open APIService.js using your favorite code editor and add the following code to create the APIService class:.