stencil-vue2-output-target
v0.0.4
Published
Vue2 output target for @stencil/core components.
Downloads
46
Readme
Vue 2 Stencil Output Targets
This project was forked from Stencils Vue Output targets in an effort to fully support Vue 2 for components built with @stencil/core
Installation
npm install -D stencil-vue2-output-target
# OR
yarn add -D stencil-vue2-output-target
Usage
Vue
Stencil Config setup
import { Config } from "@stencil/core";
import { vueOutputTarget } from "stencil-vue2-output-target";
export const config: Config = {
namespace: "demo",
outputTargets: [
vueOutputTarget({
componentCorePackage: "component-library",
proxiesFile: "../component-library-vue/src/components.ts",
componentModels: vueComponentModels,
}),
{
type: "dist",
},
],
};
componentCorePackage
This is the NPM package name of your core stencil package. In the case of Ionic we chose ‘@ionic/core’. This is the package that gets published that contains just your web components. This package is then used by the Vue package as a dependency
proxiesFile
This is the output file that gets generated by the outputTarget. This file should be referencing a different package location. In the example case we are choosing a sibling directory’s src directory. We will then create a Vue package that exports all components defined in this file.
Setup of Vue Component Library
There is an example component library package available on Github so that you can get started. This repo will likely live as a sibling to your Stencil component library.
Usage
import { DemoComponent } from "component-library-vue";