{"id":25809879,"url":"https://github.com/stenciljs/output-targets","last_synced_at":"2025-04-08T09:03:01.739Z","repository":{"id":37078719,"uuid":"186897473","full_name":"stenciljs/output-targets","owner":"stenciljs","description":"These are output targets that can be added to Stencil for React and Angular.","archived":false,"fork":false,"pushed_at":"2025-04-03T18:23:35.000Z","size":6257,"stargazers_count":256,"open_issues_count":90,"forks_count":123,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-04-07T10:45:06.753Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stenciljs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stenciljs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-15T20:22:43.000Z","updated_at":"2025-04-03T18:23:38.000Z","dependencies_parsed_at":"2024-01-18T02:14:23.454Z","dependency_job_id":"6da62ced-ac45-4209-b67c-9f34b802fff5","html_url":"https://github.com/stenciljs/output-targets","commit_stats":{"total_commits":444,"total_committers":51,"mean_commits":8.705882352941176,"dds":0.6846846846846847,"last_synced_commit":"971f219ebe92260d416e7da4af036715b8009e9f"},"previous_names":["ionic-team/stencil-ds-plugins","ionic-team/stencil-ds-output-targets"],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Foutput-targets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Foutput-targets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Foutput-targets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Foutput-targets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stenciljs","download_url":"https://codeload.github.com/stenciljs/output-targets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809962,"owners_count":20999816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-27T23:07:50.351Z","updated_at":"2025-04-08T09:03:01.721Z","avatar_url":"https://github.com/stenciljs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"| Project               | Package                                                                                          | Version                                                                                                                                            | Documentation                                        |\n| --------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |\n| React Output Target   | [`@stencil/react-output-target`](https://www.npmjs.com/package/@stencil/react-output-target)     | [![version](https://img.shields.io/npm/v/@stencil/react-output-target/latest.svg)](https://www.npmjs.com/package/@stencil/react-output-target)     | [README](./packages/react/README.md)                 |\n| Angular Output Target | [`@stencil/angular-output-target`](https://www.npmjs.com/package/@stencil/angular-output-target) | [![version](https://img.shields.io/npm/v/@stencil/angular-output-target/latest.svg)](https://www.npmjs.com/package/@stencil/angular-output-target) | [README](./packages/angular/README.md)               |\n| Vue Output Target     | [`@stencil/vue-output-target`](https://www.npmjs.com/package/@stencil/vue-output-target)         | [![version](https://img.shields.io/npm/v/@stencil/vue-output-target/latest.svg)](https://www.npmjs.com/package/@stencil/vue-output-target)         | [README](./packages/vue/README.md)                   |\n| SSR                   | [`@stencil/ssr`](https://www.npmjs.com/package/@stencil/ssr)                                     | [![version](https://img.shields.io/npm/v/@stencil/ssr/latest.svg)](https://www.npmjs.com/package/@stencil/ssr)                                     | [README](./packages/ssr/README.md)                   |\n\n# Introduction\n\nIntegrating 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.\n\nStencil offers output targets for React, Angular, and Vue.\n\n## React\n\nIn your React project, you can use the following command to install the output target:\n\n```bash\nnpm install @stencil/react-output-target\n```\n\nUpdate the `stencil.config.ts` file to include the following:\n\n```ts\nimport type { Config } from '@stencil/core';\nimport { reactOutputTarget } from '@stencil/react-output-target';\n\nexport const config: Config = {\n  // ...\n  plugins: [\n    reactOutputTarget({\n      // ...\n    })\n  ]\n  // ...\n}\n```\n\nRead more about using Stencil components in a React application in our [docs](https://stenciljs.com/docs/react).\n\n## Vue\n\nIn your Vue project, you can use the following command to install the output target:\n\n```bash\nnpm install @stencil/vue-output-target\n```\n\nUpdate the `stencil.config.ts` file to include the following:\n\n```ts\nimport type { Config } from '@stencil/core';\nimport { vueOutputTarget } from '@stencil/vue-output-target';\n\nexport const config: Config = {\n  // ...\n  plugins: [\n    vueOutputTarget({\n      // ...\n    })\n  ]\n  // ...\n}\n```\n\nRead more about using Stencil components in a Vue application in our [docs](https://stenciljs.com/docs/vue).\n\n## Angular\n\nIn your Angular project, you can use the following command to install the output target:\n\n```bash\nnpm install @stencil/angular-output-target\n```\n\nUpdate the `stencil.config.ts` file to include the following:\n\n```ts\nimport type { Config } from '@stencil/core';\nimport { angularOutputTarget } from '@stencil/angular-output-target';\n\nexport const config: Config = {\n  // ...\n  plugins: [\n    angularOutputTarget({\n      // ...\n    })\n  ]\n  // ...\n}\n```\n\nRead more about using Stencil components in an Angular application in our [docs](https://stenciljs.com/docs/angular).\n\n## Example Project\n\nCheck out our [example project](https://github.com/stenciljs/output-targets/blob/main/example-project/component-library) which structures a reference implementation for a common design system that contains the following components:\n\n- [`component-library`](https://github.com/stenciljs/output-targets/blob/main/example-project/component-library) - A Stencil project that exports components\n- [`component-library-vue`](https://github.com/stenciljs/output-targets/blob/main/example-project/component-library-vue) - A Vue project that consumes Stencil components and exports them as a Vue component\n- [`component-library-angular`](https://github.com/stenciljs/output-targets/blob/main/example-project/component-library-angular) - An Angular project that consumes Stencil components and exports them as an Angular module\n- [`component-library-react`](https://github.com/stenciljs/output-targets/blob/main/example-project/component-library-react) - A React + Vite project that uses Stencil components and exports them as a React component\n- [`next-app`](https://github.com/stenciljs/output-targets/blob/main/example-project/next-app) - A Next.js application that consumes the Stencil components from the `component-library-react` project\n- [`next-15-react-19-app`](https://github.com/stenciljs/output-targets/blob/main/example-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\n- [`nuxt-app`](https://github.com/stenciljs/output-targets/blob/main/example-project/nuxt-app) - A Nuxt application that consumes the Stencil components from the `component-library-vue` project\n- [`vue-app`](https://github.com/stenciljs/output-targets/blob/main/example-project/vue-app) - A Vue + Vite example application that consumes the Stencil components from the `component-library-vue` project\n- [`vue-app-broken`](https://github.com/stenciljs/output-targets/blob/main/example-project/vue-app-broken) - A Vue + Vite example application with invalid type use for testing purposes, ensuring Vue component properties types are propagated correctly\n\nDetailed information for each output target can be found in each package's README.\n\n## Contributing\n\nSee our [CONTRIBUTING.md](./CONTRIBUTING.md) file for more information on how to contribute to this project.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.\n\n## Community\n\nJoin the Stencil community on [Discord](https://chat.stenciljs.com/) to get help, share your projects, and get notified when new releases are made.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstenciljs%2Foutput-targets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstenciljs%2Foutput-targets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstenciljs%2Foutput-targets/lists"}