Static GitHub Issues

[1353] [v1.0.0-rc4] axios cannot use Vue.prototype.$axios [axios v0.16.2]

prev: RangeError: Maximum call stack size exceeded
next: Javascript doesn't work when put behind nginx with subdirectory

I want to access the axios instance from Vue's methods, so I write the axios plugin in plugins\axios.js as below( Which I had refer the official's axios module(https://github.com/nuxt-community/modules/blob/master/modules/axios/plugin.js)

import Vue from 'vue'
import Axios from 'axios'
import https from 'https'

//1. Define the plugin as module recommanded
const axiosPlugin = {
  install() {
    if(Vue.__nuxt_axios_installed__) {
      return
    }
    Vue.__nuxt_axios_installed__ = true

    if (!Vue.prototype.hasOwnProperty('$axios')) {
      Object.defineProperty(Vue.prototype, '$axios', {
        get () {
          return this.$root.$options.$axios
        }
      })
    }
  }
}
// 2. Use axios in global environment page instance
export default ({app, store}) => {
  const AuthorizationToken = 'Basic YWx0ZXJodTIwMjBAZ21haWwuY29tOmd1Y2hhbjE4wewMjY='
 // Http bypass the unknown issued certificate
  const Agent = new https.Agent({
    rejectUnauthorized: false
  })

  const axios = Axios.create()
// instance.defaults.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
  axios.defaults.httpsAgent = Agent
  axios.defaults.headers.common['Authorization'] = AuthorizationToken
  axios.defaults.timeout = 60000

  // Make accessible using *.axios
 // or  just use Vue.prototype.$axios=axios
  Vue.use(axiosPlugin)
  app.axios = axios
  if (store) {
    store.axios = axios
  }
}

But when I access the axios instance from methods in Vue file ,like below :

 methods: {
    changeit:() =>{
       this.fullscreenLoading = true
       const response = this.$axios.get('https://api.github.com/user')
       this.user=response.data.login
    }
  }

Then when we call this method ,from nuxt it throws below exception(TypeError: Cannot read property 'get' of undefined at VueComponent.changeit (http://localhost:7070/_nuxt/webpack:/pages/index.vue:29:1)):

2017-08-12_152943

I had tried to use other Vue plugins through Vue.prototype.$plugigname=, And it also met this same exception above .

Anybody know how to use the Vue plugin instance directly in nuxt ? really appreciated your help ....

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1200">#c1200</a>)</em></sub></div>