CODEWITHSUNDEEP
javascriptvue.jsaxiosvuejs3
volume one
volume one

Reputation: 7573

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

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?

Upvotes: 1

Views: 857

Answers (1)

Daniel
Daniel

Reputation: 35724

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';

Upvotes: 1

Related Questions