# @stencil/vue-output-target > Vue output target for @stencil/core components. Latest version **0.14.6** (published 2026-10-09) · MIT license · 0 weekly downloads ## Install ```sh npm install @stencil/vue-output-target pnpm add @stencil/vue-output-target yarn add @stencil/vue-output-target bun add @stencil/vue-output-target ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.14.6 | | Published | 2026-10-09 | | First published | 2020-06-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 110.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 266 | | Author | Ionic Team | | Maintainers | ionicjs, gm-os, vmfo, gnbm, johnny.jenkins, stencil-bot | ## Links - npm: https://www.npmjs.com/package/@stencil/vue-output-target - Repository: https://github.com/stenciljs/output-targets - Homepage: https://stenciljs.com/ - Issues: https://github.com/stenciljs/output-targets/issues - npm.io page: https://npm.io/package/@stencil/vue-output-target ## Recent versions - 0.14.6 (latest) — 2026-10-09 - 0.0.1-dev.11753708416.1bc385bb (dev) — 2025-07-28 - 0.6.1-0 (next) — 2022-06-17 - 0.14.5 — 2026-10-08 - 0.14.4 — 2026-10-06 - 0.14.3 — 2026-09-11 - 0.14.2 — 2026-08-26 - 0.14.1 — 2026-07-14 - 0.14.0 — 2026-06-25 - 0.13.2 — 2026-05-28 - 0.13.1 — 2026-02-21 - 0.13.0 — 2026-01-23 - 0.12.2 — 2026-01-20 - 0.12.1 — 2026-01-16 - 0.12.0 — 2026-01-14 - … 189 more at https://npm.io/package/@stencil/vue-output-target/versions ## README # @stencil/vue-output-target Stencil can generate Vue component wrappers for your web components. This allows your Stencil components to be used within a Vue application. For a detailed guide on how to add the vue output target to a project, visit: https://stenciljs.com/docs/vue. ## Installation ```bash npm install @stencil/vue-output-target ``` ### Usage In your `stencil.config.ts` add the following configuration to the `outputTargets` section: ```ts import { Config } from '@stencil/core'; import { vueOutputTarget } from '@stencil/vue-output-target'; export const config: Config = { namespace: 'demo', outputTargets: [ vueOutputTarget({ componentCorePackage: 'component-library', proxiesFile: '../component-library-vue/src/components.ts', }), { type: 'dist', esmLoaderPath: '../loader', }, ], }; ``` ## Config Options | Property | Description | |-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `componentCorePackage` | The NPM package name of your Stencil component library. This package is used as a dependency for your Vue wrappers. | | `outDir` | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Vue library/project. | | `excludeComponents` | An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior. | | `componentModels` | This is an array of `ComponentModelConfig` objects for components that should be integrated with `v-model`. | | `loaderDir` | This is the path to where the `defineCustomElements` function exists in your built project. If `loaderDir` is not provided, the `/dist/loader` directory will be used. | | `includePolyfills` | If `true`, polyfills will automatically be imported and the `applyPolyfills` function will be called in your proxies file. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`. | | `includeDefineCustomElements` | If `true`, all Web Components will automatically be registered with the Custom Elements Registry. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`. | | `includeImportCustomElements` | If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements) and will not work with lazy loaded components. | | `customElementsDir` | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`. | | `hydrateModule` | To enable server side rendering, provide the path to the hydrate module, e.g. `my-component/hydrate`. By default, this value is undefined and server side rendering is disabled. | ## Interfaces ### ComponentModelConfig The interface used for `componentModels`. ```typescript export interface ComponentModelConfig { /** * An array of element names that * should have v-model integration. */ elements: string | string[]; /** * The event emitted from the Web Component * that should trigger a `v-model` update. */ event: string; /** * The Web Component property that the value * of the `v-model` reference is based off. */ targetAttr: string; /** * The event attribute that should be used * to trigger the `v-model` update with. * Uses dot notation to specify nested properties. (i.e. `detail.value) */ eventAttr?: string; } ``` Example usage within `stencil.config.ts`: ```typescript vueOutputTarget({ ..., componentModels: [ { elements: ['my-input', 'my-textarea'], event: 'on-change', targetAttr: 'value' } ] }) ``` --- _Source: https://npm.io/package/@stencil/vue-output-target · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._