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