Skip to content

docs: show plugin installation in custom elements #3489

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.

Sign up for GitHub

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

Open
Doomguy-BFG9000 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: show plugin installation in custom elements #3489

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/guide/extras/web-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,20 @@ defineCustomElement(MyComponent, {
})
```

To use a [Vue plugin](/guide/reusability/plugins) in a custom element, install it on the element's app instance inside `configureApp`:

```js
import MyPlugin from './my-plugin'

defineCustomElement(MyComponent, {
configureApp(app) {
app.use(MyPlugin)
}
})
```

Each custom element instance has its own Vue app, so plugins must be installed through `configureApp` for each instance that needs them.

### SFC as Custom Element {#sfc-as-custom-element}

`defineCustomElement` also works with Vue Single-File Components (SFCs). However, with the default tooling setup, the `<style>` inside the SFCs will still be extracted and merged into a single CSS file during production build. When using an SFC as a custom element, it is often desirable to inject the `<style>` tags into the custom element's shadow root instead.
Expand Down