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

I need to use socket.io globally in my app.

In main.js, to set the url of socket.io 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 socket.io.

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 "vue-socket.io-extended";
import io from "socket.io-client";

const domain = window.location.hostname;
try {
  const url = await axios.get(domain);
  const urlapi = url.data.api;
  const socket = io(urlapi, {
    autoConnect: true,
  });
  Vue.use(VueSocketIOExt, socket);
} catch (error) {
  console.log("erro", error);
}
Vue.config.productionTip = false;
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#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 socket.io in a module and import that initialized instance to the component(s) you need it in