npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@public-ui/stencil-vue-output-target

v0.9.0

Published

Vue output target for @stencil/core components.

Downloads

310

Readme

@public-ui/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 @public-ui/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 '@public-ui/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. | | proxiesFile | 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. |

Runtime Config Options

If you want to use custom tag names, you can use the setTagNameTransformer function to define a function which transforms the tag names.
It is recommended to configure this before you use the component library.

import { setTagNameTransformer } from '<your-library>/vue';
setTagNameTransformer((tagName: string) => `${tagName}-v2`);

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;
}

Example usage within stencil.config.ts:

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