I can't figure out how to use globalProperties on a web component.
My main.js looks like this:
import { defineCustomElement } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import CoolComponent from './CoolComponent.ce.vue'
const apiBaseUrl = 'https://api.my-domain/public';
axios.defaults.baseURL = apiBaseUrl;
const element = defineCustomElement(CoolComponent, {
plugins: [VueAxios, axios],
});
customElements.define("my-component", element);
I would now like to define the variable apiBaseUrl as a global variable in main.js, so I can access apiBaseUrl from any component.
In a "regular" app I would solve it like this:
app.config.globalProperties.apiBaseUrl = 'https://api.my-domain/public'
But of course that doesn't work in this case. What is the equivalent of "app...." in this case?
I use Vue 3 + Vite.
How can I best solve this? I look forward to your feedback!
Regards