Negotiate Pushing Milestone

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

    3.3.7 • 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 documention of axios too

    Install

    npm i vue-axios@3.3.7

    Version

    3.3.7

    License

    MIT

    Unpacked Size

    8.42 kB

    Total Files

    6

    Last publish

    Collaborators

    • imcvampire