Vue 3 Web Component - How to use globalProperties

Viewed 310

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

2 Answers

Not possible in Vue 3

This is a replacement of Vue 2's Vue.prototype which is no longer present in Vue 3. As with anything global, this should be used sparingly.

Source

Related