vue-axios
    TypeScript icon, indicating that this package has built-in type declarations

    3.4.0 • Public • Published

    vue-axios

    npm version install size npm downloads jsdelivr License

    A small wrapper for integrating axios to Vuejs

    Why

    I created this library because, in the past, I needed a simple solution to migrate from vue-resource to axios.

    It only binds axios to the vue instance so you don't have to import everytime you use axios.

    Support matrix

    VueJS \ VueAxios 1.x 2.x 3.x
    1.x
    2.x
    3.x

    How to install:

    ES6 Module:

    npm install --save axios vue-axios

    Import libraries in entry file:

    // import Vue from 'vue'   // in Vue 2
    import * as Vue from 'vue' // in Vue 3
    import axios from 'axios'
    import VueAxios from 'vue-axios'

    Usage in Vue 2:

    Vue.use(VueAxios, axios)

    Usage in Vue 3:

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

    Script:

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

    Usage:

    in Vue 2

    This wrapper bind axios to Vue or this if you're using single file component.

    You can use axios like this:

    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)
    })

    in Vue 3

    This wrapper bind axios to app instance or this if you're using single file component.

    in option API, you can use axios like this:

    // 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)
          })
        }
      }
    }

    however, in composition API setup we can't use this, you should use provide API to share the globally instance properties first, then use inject API to inject axios to setup:

    // main.ts
    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)  // provide 'axios'
    app.mount('#app')
    
    // App.vue
    import { inject } from 'vue'
    
    export default {
      name: 'Comp',
      setup() {
        const axios: any = inject('axios')  // inject axios
    
        const getList = (): void => {
          axios
            .get(api)
            .then((response: { data: any }) => {
              console.log(response.data)
            });
        };
    
        return { getList }
      }
    }

    Please kindly check full documentation of axios too

    Multiple axios instances support

    The library allows to have different version of axios at the same time as well as change the default registration names (e.g. axios and $http). To use this feature you need to provide options like an object where:

    • <key> is registration name
    • <value> is instance of axios

    For Vue it looks like this:

    // Vue 2 / Vue 3 + Composition API
    import App from './App.vue'
    import VueAxios from 'vue-axios'
    import axios from 'axios'
    import axios2 from 'axios'
    Vue.use(VueAxios, { $myHttp: axios, axios2: axios2 }) // or app.use() for Vue 3 Optiona API
    
    // usage
    export default {
      methods: {
        getList(){
          this.$myHttp.get(api).then((response) => {
            console.log(response.data)
          })
          this.axios2.get(api).then((response) => {
            console.log(response.data)
          })
        }
      }
    }

    It works similarly in Options API of Vue 3 but if you want to use Composition API you should adjust your code a bit to extract proper keys, e.g.:

    // Vue 2 + Setup function
    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, { $myHttp: axios, axios2: axios2 })
    app.provide('$myHttp', app.config.globalProperties.$myHttp)  // provide '$myHttp'
    app.provide('axios2', app.config.globalProperties.axios2)  // provide 'axios2'
    app.mount('#app')
    
    // App.vue
    import { inject } from 'vue'
    
    export default {
      name: 'Comp',
      setup() {
        const $myHttp: any = inject('$myHttp')  // inject $myHttp
    
        const getListWithMyHttp = (): void => {
          $myHttp
            .get(api)
            .then((response: { data: any }) => {
              console.log(response.data)
            });
        };
    
        const axios2: any = inject('axios2')  // inject axios2
        const getListWithAxios2 = (): void => {
          axios2
            .get(api)
            .then((response: { data: any }) => {
              console.log(response.data)
            });
        };
    
    
        return { getListWithMyHttp, getListWithAxios2 }
      }
    }

    Install

    npm i vue-axios@3.4.0

    Version

    3.4.0

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • imcvampire