Replace vue-resource with axios

[grantcarthew]

axios is a Promise based HTTP client for the browser and node.js.

To add it to Vue make a plugin.

Here is an example. Create a plugin-http.js file in a plugins directory:

import axios from 'axios'

function interceptResponse (response) {
  // something
}

function interceptRequest (config) {
  // something
}

axios.interceptors.request.use(interceptRequest)
axios.interceptors.response.use(interceptResponse, // catch errors)

const api = {
  install (Vue) {
    Vue.prototype.$api = axios.create({
      baseURL: `/api/`,
      headers: {
        Authorization: 'Bearer {token}'
      }
    })
  }
}

// Automatic installation if Vue has been added to the global scope.
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(api)
}

export default api

An index.js for the plugins directory:

export {default as api} from './plugin-api'
export {default as logging} from './plugin-logging'

In main.js install the plugin with:

import * as plugins from './plugins'
Vue.use(plugins.logging)
Vue.use(plugins.api)

Now you can use the $api property on any Vue or this object:

  mounted () {
    this.signInModal = new Foundation.Reveal($('#signin-modal'))
    this.offCanvas = new Foundation.OffCanvas($('#off-canvas'))
    this.$api.get('/auth/verify')
    .then(function (response) {
      log.info(response)
    })
    .catch(function (error) {
      log.error(error)
    })
    this.signInModal.$element.foundation('open')
  }
}