I'm having trouble understanding how to implement globalProperties within a web component.
Here's a snippet from my main.js file:
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);
What I'm trying to do now is declare the variable apiBaseUrl as a global variable in main.js so that it can be accessed from any component.
In a traditional Vue app, I would tackle this issue by:
app.config.globalProperties.apiBaseUrl = 'https://api.my-domain/public'
However, this approach doesn't work in this scenario. What is the equivalent of "app...." in this case?
I am using Vue 3 + Vite.
I'd appreciate any suggestions on how to best resolve this issue. Looking forward to your insights!
Best regards