PrimeVue component in Vue3 Custom Element has no access to $primevue global variable

53 Views Asked by At

I have a XYZ Vue 3 component I am generating as a custom element (web component to be used by other, Angular app). The XYZ component has many subcomponents, including PrimeVue's <Dropdown />. This Dropdown uses the global property $primevue to get a config for zIndex.

It works in the standard Vue3 environment, as the global app.globalProperties.config.$primevue is auto injected to all components and accessible in the this context.

However, when generating the custom element, $primevue.config.modal.zIndex is undefined.

How do I make the global properties accessible to PrimeVue components (that I cannot edit) when generating the custom element?

I'm trying to extend the defineCustomElement() method to define custom elements, but didn't find the proper method to access all the subcomponents, PrimeVue's components specifically and to "inject" into them $primevue variable.

0

There are 0 best solutions below