README.md

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

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 components
• component-library-vue - A Vue project that consumes Stencil components and exports them as a Vue component
• component-library-angular - An Angular project that consumes Stencil components and exports them as an Angular module
• component-library-react - A React + Vite project that uses Stencil components and exports them as a React component
• next-app - A Next.js application that consumes the Stencil components from the component-library-react project
• nuxt-app - A Nuxt application that consumes the Stencil components from the component-library-vue project
• vue-app - A Vue + Vite example application that consumes the Stencil components from the component-library-vue project

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.