Introduction
Integrating web components into existing framework applications can be difficult at times. More about this can be read at https://custom-elements-everywhere.com/. To accommodate the various issues, the Stencil team has created output target plugins to make the process simpler.
Stencil offers output targets for React, Angular, and Vue.
React
In your React project, you can use the following command to install the output target:
npm install @stencil/react-output-target
Update the stencil.config.ts file to include the following:
import type { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';
export const config: Config = {
// ...
plugins: [
reactOutputTarget({
// ...
})
]
// ...
}
Read more about using Stencil components in a React application in our docs.
Vue
In your Vue project, you can use the following command to install the output target:
npm install @stencil/vue-output-target
Update the stencil.config.ts file to include the following:
import type { Config } from '@stencil/core';
import { vueOutputTarget } from '@stencil/vue-output-target';
export const config: Config = {
// ...
plugins: [
vueOutputTarget({
// ...
})
]
// ...
}
Read more about using Stencil components in a Vue application in our docs.
Angular
In your Angular project, you can use the following command to install the output target:
npm install @stencil/angular-output-target
Update the stencil.config.ts file to include the following:
import type { Config } from '@stencil/core';
import { angularOutputTarget } from '@stencil/angular-output-target';
export const config: Config = {
// ...
plugins: [
angularOutputTarget({
// ...
})
]
// ...
}
Read more about using Stencil components in an Angular application in our docs.
Example Project
Check out our example project which structures a reference implementation for a common design system that contains the following components:
component-library - A Stencil project that exports componentscomponent-library-vue - A Vue project that consumes Stencil components and exports them as a Vue componentcomponent-library-angular - An Angular project that consumes Stencil components and exports them as an Angular modulecomponent-library-react - A React + Vite project that uses Stencil components and exports them as a React componentnext-app - A Next.js application that consumes the Stencil components from the component-library-react projectnext-15-react-19-app - A Next.js v15 application using React v19 that consumes the Stencil components from the component-library-react projectnext-15-runtime-based - A Next.js v15 application using React v19 that uses a runtime based approach for SSRnuxt-app - A Nuxt application that consumes the Stencil components from the component-library-vue projectvue-app - A Vue + Vite example application that consumes the Stencil components from the component-library-vue projectvue-app-broken - A Vue + Vite example application with invalid type use for testing purposes, ensuring Vue component properties types are propagated correctly
Detailed information for each output target can be found in each package's README.
Contributing
See our CONTRIBUTING.md file for more information on how to contribute to this project.
License
This project is licensed under the MIT License. See the LICENSE file for more information.
Community
Join the Stencil community on Discord to get help, share your projects, and get notified when new releases are made.
