Project	Package	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
SSR	`@stencil/ssr`	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
next-15-react-19-app - A Next.js v15 application using React v19 that consumes the Stencil components from the component-library-react project
next-15-runtime-based - A Next.js v15 application using React v19 that uses a runtime based approach for SSR
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
vue-app-broken - A Vue + Vite example application with invalid type use for testing purposes, ensuring Vue component properties types are propagated correctly