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

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>