Allow using full Vue application instance when defining Custom Element

[gusdemayo]

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())

[NielsJorck]

This would likely also fix the issue with devtools not working in Custom Elements:
#4356

[davidurco]

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!

[rogyvoje]

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.

[scvnc]

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>

[jf-niji]

Hello Vue team,

Do you have any plan for this feature?

Regards.

[ankitsinghaniyaz]

Is this still something that Vue will support?

[yyx990803]

Closed via 6758c3c

Note the design is a bit different from proposed - instead of passing in an already created app, custom elements now always have an associated app and can be configured via the configureApp extra option. This is because defineCustomElement and defineSSRCustomElement need to auto-determine the use of createApp vs createSSRApp internally.

defineCustomElement(VueComponent, {
  configureApp(app) {
    // ...
  }
})