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?

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

Leave a Comment