[Install] Vue Axios Npm Library Guideline And Basic Usage In Vue Project

What is Axios?

Axios is a library of the HTTP request communication, and making an ajax request to send data API and receive a response from the API. There is a library name with 'vue-resource' to do such this thing.

The axios is an excellent library that executes both sides server-side and client-side too. Which makes API REQUEST to procedure-specific done the task.

So this is the important library to send ajax request to HTTP serverside with given specific request method.

In this post, you will learn how to install and save the package in your vue js project. This is an easy step and clearly understand in this post.

Axios Install Command

First, Install the Axios library in your vue js project. Below the given command just copy and run in your terminal project directory.

It will take some time to install the library in your project then after we just need a little configuration needed in our project.

You can install Axios with npm:

npm install --save axios vue-axios

Or with Yarn:

yarn add axios

After installing the Axios library in your vue project move forward next step is to import library in your main.js file.

Import Library

Goto your project main.js file and import library as below given sample. Here you just need to notice that sequence is most important else it will throw some errors.

src/main.js

// import Vue from 'vue'   // in Vue 2 (Ignore if already imported)
// import * as Vue from 'vue' // in Vue 3 (Ignore if already imported)
import axios from 'axios'
import VueAxios from 'vue-axios'

Once Import libraries in the entry file

Usage in Vue 2:

This is for vue version 2. After importing the library in your main.js file you need to bind in the Vue. For binding in vue just follow the below given code.

Vue.use(VueAxios, axios) // APPLY FOR VUE 2

It will bind the Axios library in your vue 2 projects.

Usage in Vue 3:

If you are using vue 3 then your configuration little bit different from vue 2.

You need to config like the below-given code example just copy and paste it into your main.js file of the vue 3 projects.

src/main.js

const app = Vue.createApp(...) // APPLY FOR VUE 3
app.use(VueAxios, axios)

It will bind Axios library in your vue 3 projects.

Script Sequence

You must need to follow the sequence in your main.js file else it will throw an error.

Just add 3 scripts in order: vue, Axios, and vue-Axios to your document.

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

After adding the above sequence in your main.js file next give some examples of basic usage of Axios in your vue project.

Basic Usage In Vue

This wrapper binding in the Vue or this if you are using a single file component.

You can still use Axios with Vue instead of this you can see the below example.

Vue.axios.get(api).then((response) => {
    console.log(response.data)
})

this.axios.get(api).then((response) => {
    console.log(response.data)
})

this.$http.get(api).then((response) => {
    console.log(response.data)
})

Vue 3 Basic Usage

This wrapper binding in the Vue or this if you are using a single file component.

Used inside the method for fire API on some event action.

App.vue

export default {
    name: 'App',
    methods: {
        getList() {
            this.axios.get(api).then((response) => {
                console.log(response.data)
            });

            // or
            
            this.$http.get(api).then((response) => {
                console.log(response.data)
            });
        } //
    }
}

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)