Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@stencil/vue-output-target

Package Overview
Dependencies
Maintainers
2
Versions
158
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stencil/vue-output-target

Vue output target for @stencil/core components.

  • 0.5.1-dev.11685564559.1b0b6e89
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.3K
increased by1.42%
Maintainers
2
Weekly downloads
 
Created
Source

@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

npm install @stencil/vue-output-target

Usage

In your stencil.config.ts add the following configuration to the outputTargets section:

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

PropertyDescription
componentCorePackageThe NPM package name of your Stencil component library. This package is used as a dependency for your Vue wrappers.
proxiesFileThe 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.
excludeComponentsAn 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.
componentModelsThis is an array of ComponentModelConfig objects for components that should be integrated with v-model.
loaderDirThis 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.
includePolyfillsIf 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.
includeDefineCustomElementsIf 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.
includeImportCustomElementsIf 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.
customElementsDirThis 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.

Interfaces

ComponentModelConfig

The interface used for componentModels.

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;

  /**
   * (optional) The event to emit from the Vue component
   * wrapper. When listening directly to the `event` emitted
   * from the Web Component, the `v-model` reference has not
   * yet had a chance to update. By setting `externalEvent`,
   * your Web Component can emit `event`, the Vue output target
   * can update the `v-model` reference, and then emit `externalEvent`,
   * notifying the end user that `v-model` has changed. Defaults to `event`.
   */
  externalEvent?: string;
}

Example usage within stencil.config.ts:

vueOutputTarget({
  ...,
  componentModels: [
    {
      elements: ['my-input', 'my-textarea'],
      event: 'v-on-change',
      externalEvent: 'on-change',
      targetAttr: 'value'
    }
  ]
})

FAQs

Package last updated on 31 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc