Subscribe on changes!

Allow using full Vue application instance when defining Custom Element

avatar
Sep 20th 2021

What problem does this feature solve?

It'd be useful to be able to use a full Vue instance when defining a custom element, i.e. to use plugins like Vue Router or Vuex within a custom element.

What does the proposed API look like?

defineCustomElement(createApp())
avatar
Jul 5th 2022

This would likely also fix the issue with devtools not working in Custom Elements: https://github.com/vuejs/core/issues/4356

avatar
Dec 8th 2022

Any progress on this one? We all need to realize that people use Vue to build full-featured custom element apps. Not only for small components as was intended. We need this!

avatar
Apr 17th 2023

This would come in hand as we can create embeddable apps isolated from websites where we use them. Really powerful feature, but this has to work with styles as well, as by default it will inject the styles inside the root HTML and not the shadowed one.

I experimented a little with this but it is not possible to satisfy my needs during development and production mode without some complex logic.

avatar
Apr 17th 2023

I also wanted to do this. I figured out a workaround for my use case by having a 'shim' app intercept the equivalent calls a plugin might make.

https://gist.github.com/scvnc/5ca1771cbcb199b0aa58b2a7094ecc62

Example successfully registering the PrimeVue plugin in a CE Vue component

<script setup lang="ts">
import { useCeVueApp } from './useCeVueApp';
import PrimeVue from 'primevue/config'
useCeVueApp(app => {
    app.use(PrimeVue);
});
</script>
avatar
Sep 15th 2023

Hello Vue team,

Do you have any plan for this feature?

Regards.