How to use Axios in main.js

user_2672338 0
Viewed 5605

I am learning Vue.js.

I have this code which runs fine :

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App).use(store).use(router)

app.mount('#app')

Now I would like to add some import, for example 'axios'. This code does not run :

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

const app = createApp(App).use(store).use(router).use(axios)

app.mount('#app')

The error is:

Uncaught RangeError: Maximum call stack size exceeded

    at merge (utils.js?c532:276)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)

So how to add some other "use" in the main.js file ? It is certainly very basic but I am a beginner.

axios vuejs3 vue.js
2 Answers

You're using vue 3 and axios is not a plugin (we cannot register it like app.use()) it's a javascript module that could be add to the app instance like :

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

const app = createApp(App).use(store).use(router)

app.config.globalProperties.axios=axios

app.mount('#app')

and in child component reference it like :

this.axios
user_81728570

Note: the code below is valid for Vue 2.x. Since version 3, some stuff has changed regarding initialization (createApp function is now required).

What I usually do in my code is the following:

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

// Add it to Vue prototype (use any variable you like, preferrably prefixed with a $).
Vue.prototype.$http = axios;

// Instantiate the main vue app.
let app = new Vue({
  //
});

This means that the $http object is now available in all your components using this.$http. Since it is assigned as a prototype variable, it is considered a singleton (it is re-used everywhere), so you can add any options you need to the axios variable before assigning it to Vue.prototype.$http.

Additionally: Vue.use() is made specifically for enabling Vue plugins. That means the given parameter must use the exact syntax as described here https://v2.vuejs.org/v2/guide/plugins.html . Since axios is not a Vue plugin but just a regular JavaScript library, you cannot use it with this function.

If you want to make it especially nice (or convoluted), you can use the following syntax:

Vue.use({
    install(v) {
        v.prototype.$http = axios;

        // Do other stuff like adding mixins etc.
    }
})

This may clear up your code if you move this code to another file, so it could end up like this:

import myCustomAxiosLoader from './bootstrap/axios';
Vue.use(myCustomAxiosLoader);
user_13463670
Related