gem-hunter
Language: TypeScript
These are output targets that can be added to Stencil for React and Angular.
| Project | Package | Version | Documentation |
|---|---|---|---|
| React Output Target | @stencil/react-output-target |
README | |
| Angular Output Target | @stencil/angular-output-target |
README | |
| Vue Output Target | @stencil/vue-output-target |
README | |
| Types Output Target | @stencil/types-output-target |
README | |
| SSR | @stencil/ssr |
README |
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.
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.
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.
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.
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-type-test - A Vue + Vite example application with invalid type use for testing purposes, ensuring Vue component properties types are propagated correctlyDetailed information for each output target can be found in each package's README.
See our CONTRIBUTING.md file for more information on how to contribute to this project.
This project is licensed under the MIT License. See the LICENSE file for more information.
Join the Stencil community on Discord to get help, share your projects, and get notified when new releases are made.