CODEWITHSUNDEEP
javascriptvue.jsvuejs2axios
Beginner
Beginner

Reputation: 1740

axios is not defined in vue js cli

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?

Upvotes: 34

Views: 101725

Answers (8)

Axel
Axel

Reputation: 5131

Solution 1 (Not recommended):

In main.js, add this line instead of import axios from 'axios'

window.axios = require('axios');

And remove

Vue.use(axios)

Solution 2 (Recommended Approach):

Using window is generally considered a bad practice, so you better use axios the following way:

  1. Create a folder named plugins inside of your src directory.

  2. Then, create axios.js file inside that directory. We will put all our axios logic here and use axios as a Vue plugin.

  3. Add the following:

import ax from 'axios'

// insert all your axios logic here

export const axios = ax

export default {
    install (Vue, options) {
        Vue.prototype.$axios = ax
    }
}
  1. In src/main.js, add the following:
import Vue from 'vue' // You can skip this line
import VueAxios from './plugins/axios'

Vue.use(VueAxios)

Now, you can use axios as this.$axios in your components. So something like this.$axios.get().

Therefore, you can import axios with the following line:

import { axios } from '@/plugins/axios'

Now, you can use axios directly in your store.

Or you can also use it as Vuex plugin:

import { axios } from '@/plugins/axios'

const axiosPlugin = store => {
   store.$axios = axios
}

new Vuex.Store({
    ...,
    plugins: [axiosPlugin]
})

Now, you can use it as this.$axios in Vuex.

Upvotes: 27

Rupak
Rupak

Reputation: 17

To use in Vue Components, install both Vue Axios and Axios packages

npm install --save axios vue-axios

In your main.js file, add the following:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

With the above solution, I never had an issue using axios in my Vue components with this keyword till now.

Custom Javascript File

However, I had faced issues using Axios in a custom JS file with axios not defined error.

Following worked for me in a custom JS file:

const axios = require("axios");

Usage example:

export default {
  fetchProducts() {
    return axios.get(`${ROOT_URL}/products`);
  },
};

Upvotes: -1

Ajay
Ajay

Reputation: 975

Use following command to install axios

 npm install axios --save

After executing above command import like mentioned below:

import axios from 'axios'

Upvotes: 13

Hamza Khan
Hamza Khan

Reputation: 361

Include this line: 

import {AxiosInstance as axios} from "axios";

Upvotes: 1

user3918528
user3918528

Reputation: 145

Also install vue-axios and import in main.js

import VueAxios from 'vue-axios'

Then in main.js:

Vue.use(VueAxios, axios)

Now if I am not mistaken in your methods you can use for example:

let uri = 'http://localhost:4000/tickets/add';
this.axios.post(uri, this.ticket).then((response) => {
    console.log(response);
});

Upvotes: 6

Nur Uddin
Nur Uddin

Reputation: 1840

Try this codes:

import axios from 'axios'
    Vue.use(axios)

Upvotes: -4

user3003238
user3003238

Reputation: 1515

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

Upvotes: 38

Julian Paolo Dayag
Julian Paolo Dayag

Reputation: 3739

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios;

then inside your component you can start using axios like this:

{
    methods: {
        someMethod() {
            this.$http.get('/users').then(() => {
                // do something
            })
        }
    }
}

Upvotes: 4

Related Questions