TypeError: app.$axios is undefined in Vue.js 3

user_1774037 0
Viewed 360

I have a main.js file which creates an app and adds various things to it like router, store, and axios.

This is what I'm doing to add axios globally:

import {createSSRApp, createApp, h} from 'vue';
import axios from 'axios'    

 const rootComponent = {
        render: () => h(App),
        components: { App }
    }

const app = createApp(rootComponent);
app.config.globalProperties.$axios=axios;

if (process.env.NODE_ENV === 'development') {
        app.$axios.defaults.baseURL = 'http://localhost:8080'; // This throws an error
}

When I run this in the browser using webpack-dev-server, I am getting an error saying:

Uncaught TypeError: app.$axios is undefined

Why does app.$axios not exist?

axios vuejs3 vue.js javascript
1 Answers

Because the global property is available on the instance not the prototype.

docs

globalProperties

Adds a global property that can be accessed in any component instance inside the application. The component’s property will take priority when there are conflicting keys.

So you can use it inside the app or component instances with this

this.$axios.defaults.baseURL = 'http://localhost:8080';

or if you're using it outside the app instance, you can access it the same way as you defined

// in the same file, since you have the axios object already
axios.defaults.baseURL = 'http://localhost:8080'; 

// or from somewhere else
app.config.globalProperties.$axios.defaults.baseURL = 'http://localhost:8080';
user_1975460
Related