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?

1 thought on “TypeError: app.$axios is undefined in Vue.js 3”

  1. 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';
    
    Reply

Leave a Comment