Vue 3 axios

1. Overview

In this article, we will learn to use Axios in Vue 3. To learn more about Vue, refer to these articles.

2. Axios HTTP client

An HTTP client is useful whenever a request needs to be sent to another server. As we all know, the callback is an old concept. So we need an HTTP client which is promise-based.

A promise-based client returns promises rather than accepting callbacks. The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. An Axios is a promise-based HTTP client for the browser and node.js.

Along with node.js, Axios supports almost all the latest versions of browsers i.e. Firefox, Chrome, IE, Edge, Safari for sending requests.

It allows making XMLHttpRequests from the browser. XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

See this Axios documentation for more in-depth details.

3. Vue 3 Axios

You can use the vue-axios library to integrate our vue js app with Axios.

It binds the Axios to the vue instance so you don’t have to import every time you use axios.

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

const app = Vue.createApp(...)
app.use(VueAxios, axios)

You can bind Axios to an app instance or this if you’re using a single file component.

3.1. Options Axios API

In option API, you can use axios like this:

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

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

3.2. Vue composition API Axios

In composition API, we can’t use this with setup, use provide API to share the global instance properties first, then use inject API to inject axios to setup:

const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)  
app.mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)  
app.mount('#app')


import { inject } from 'vue'

export default {
  name: 'Comp',
  setup() {
    const axios: any = inject('axios')  

    const getList = (): void => {
      axios
        .get(api)
        .then((response: { data: any }) => {
          console.log(response.data)
        });
    };

    return { getList }
  }
}

4. Conclusion

To sum up, we have learned to use Axios with Vue 3 project.