Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow using full Vue application instance when defining Custom Element #4635

Closed
gusdemayo opened this issue Sep 20, 2021 · 7 comments
Closed

Comments

@gusdemayo
Copy link

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
Copy link

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

@yyx990803 yyx990803 changed the title Allow Use Of Full Vue Instance In Custom Element Allow using full Vue application instance when defining Custom Element Nov 11, 2022
@davidurco
Copy link

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
Copy link

rogyvoje commented Apr 17, 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.

@scvnc
Copy link

scvnc commented Apr 17, 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>

@jf-niji
Copy link

jf-niji commented Sep 15, 2023

Hello Vue team,

Do you have any plan for this feature?

Regards.

@ankitsinghaniyaz
Copy link

Is this still something that Vue will support?

yyx990803 added a commit that referenced this issue Aug 7, 2024
…omElement

Support configuring via `configureApp` option:

```js
defineCustomElement({
  // ...
}, {
  configureApp(app) {
    // ...
  }
})
```

close #4356
close #4635
@yyx990803
Copy link
Member

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) {
    // ...
  }
})

@github-actions github-actions bot locked and limited conversation to collaborators Aug 22, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

8 participants