vue 3 can't get globalProperties

app.js

import { createApp } from 'vue';
import App from '@/views/App';
import router from '@/router';
import i18n from '@/lang';
import axios from "axios";

const app = createApp(App);
const appRoot = app.use(router).use(i18n).mount("#app");

process.env.MIX_API_BASE_URL = 'http://127.0.0.1:8000/api';

app.config.globalProperties.$http = axios.create({
  baseURL: process.env.MIX_API_BASE_URL,
  headers: {
    "Content-type": "application/json",
  },
});

require('./bootstrap');

in composables language.js

import { ref } from 'vue'
import { useRouter } from 'vue-router'
import i18n from '@/lang'


export default function useLanguage() {

    app.config.globalProperties.$http
    
    return {

    }
}

i want to get axios instanse whitch is http it gives me error "Cannot read properties of undefined (reading 'globalProperties')"

lucassemelin

3 years ago

Level 17

I've resolved it calling .mout("#app") after declaring globalProperties. Like so:

const app = createApp(App).use(router).use(i18n)
...
app.config.globalProperties.$http = axios.create({....});

app.mount("#app");

Hope this help

Please or to participate in this conversation.