javascript - axios is not defined in vue js cli

Question

I installed axios using the npm install axios command this is my package.json dependencies

 "dependencies": {
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

I registered the axios in my main.js file.

import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'

import axios from 'axios'
import App from './App'
import routerList from './routes'

Vue.use(axios)
Vue.use(BootstrapVue)
Vue.use(VueRouter)

When I tried to use axios in one of my components I get this error:

Uncaught ReferenceError: axios is not defined

How to fix this?

Answer 1

Vue.use means adding plugins. However, axios is not a plugin for Vue, so you can not add it globally via use.

My recommendation is importing axios only when you need it. But if you really need to access it globally, you may like to add it to prototype.

Vue.prototype.$axios = axios

Then you can access axios in vue using this.$axios