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?

84 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
  2. I have been browsing online more than 3 hours today, yet I never found any
    interesting article like yours. It is pretty worth enough for me.
    In my view, if all web owners and bloggers made good content as you did,
    the internet will be a lot more useful than ever before.

    Reply
  3. Интернет-платформа Joycasino возникла на просторах отечественного интернета
    более 7 лет назад. Пользователям веб-проекта предоставляется лучший софт от известных производителей.
    В ассортимент виртуальных развлечений входят автоматы барабанного типа,
    карточные и настольные игры в режиме live и прогнозы на спорт и киберспортивные дисциплины.

    Reply

Leave a Comment