vue-plugin-axios

    1.0.14 • Public • Published

    Usage

    Add Vue plugin

    import Vue from 'vue'
    import VueAxios from 'vue-plugin-axios'
    import axios from 'axios'
    import store from '@/store'
     
    Vue.use(VueAxios, {
      axios, 
      // example config for axios instance
      config: { // axios instance config
        baseURL: 'http://localhost:8000/', // api URL
        headers: { ... }, // default headers
        ...
      },
      interceptors: {
        // this function shows how to add Authorization header to requests
        beforeRequest (config, axiosInstance) {
          // your auth token
          const token = store.state.auth.token
     
          if (token) {
            config.headers.Authorization = `Bearer ${token}`
          }
          
          return config
        },
        // this function shows how to add errors from server to client app
        beforeResponseError (error) {
          const { response, message } = error
     
          if (response) { // backend error
            // shows response error
            alert(error.response.data.message)
          } else if (message) { // network error
            alert(message)
          }
          
          // return Promise.reject(error)
        }
      }
    })

    Now you can access from a component:

    // no need to import
    export default {
      data: () => ({
        users: null
      }),
      async mounted () {
        // automatic data return, no need to ".data"
        this.users = await this.$get('api/get-users/')
        const randomUsers = await this.$get('https://randomuser.me/api/')
      }
    }

    Installation

    1. npm install vue-plugin-axios --save or yarn add vue-plugin-axios
    2. add Vue.use like in code above

    This is how you can use with Nuxt.js (client + server):

    export default ({ store, app }, inject) => {
      // Vue.use(VueAxios, for some reason did not work
      VueAxios.install(Vue, {
        axios,
        nuxtInject: inject
      })
    }

    Full API

    $get(endpoint[, config])

    $delete(endpoint[, config])

    $head(endpoint[, config])

    $options(endpoint[, config])

    $post(endpoint[, data[, config]])

    $put(endpoint[, data[, config]])

    $patch(endpoint[, data[, config]])

    Axios instance:

    $axios or $http

    For full response you can use:

    const { data, status, statusText, headers } = await this.$axios.post('/api/get-users')
    Set custom header:
    $axios.setHeader('X-Custom-Header', 'value')

    or multiple:

    $axios.setHeader({
      auth: token, // thiw will set 'Authorization' header, no need prefix 'Bearer '
      'X-Custom-Header': 'value',
      'Y-Custom-Header': 'value'
    })

    Set Authorization token header:

    $axios.setToken(token[, type = 'Bearer'])
    Delete header:
    deleteHeader('X-Custom-Header')
    deleteHeader(['X-Custom-Header', 'Y-Custom-Header'])

    Install

    npm i vue-plugin-axios

    DownloadsWeekly Downloads

    146

    Version

    1.0.14

    License

    MIT

    Unpacked Size

    145 kB

    Total Files

    7

    Last publish

    Collaborators

    • ilyazelenko