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?

22 thoughts on “TypeError: app.$axios is undefined in Vue.js 3”

  1. 395191 430705Hello, Neat post. Theres an problem together together with your website in web explorer, may possibly check this? IE still may be the marketplace leader and a huge component to folks will omit your wonderful writing because of this dilemma. 922618

    Reply