Set global component in main.js depend on axios api return

I need to use globally in my app.

In main.js, to set the url of I need to make a backend call with axios to get the url.

I have done the next, but it doesn´t work.

Is possible I move this code to App.vue, but maintaining the global use of

I need my socket io instance available to all app, not only to a component.
import Vue from “vue”;
import App from “./App.vue”;
import router from “./router”;
import axios from “axios”;

//socket io
import VueSocketIOExt from "";
import io from "";

const domain = window.location.hostname;
try {
  const url = await axios.get(domain);
  const urlapi =;
  const socket = io(urlapi, {
    autoConnect: true,
  Vue.use(VueSocketIOExt, socket);
} catch (error) {
  console.log("erro", error);
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),

You have a few options for global access,

  1. Add the instance to window
  2. Add the instance to Vue’s root instance
  3. Use state management such as Vuex
  4. Initialize in a module and import that initialized instance to the component(s) you need it in