@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
`

$3

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 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. 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

$3

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'
}
]
})
``