This is a step by step guide, how we can use a stencil component in a Vue app. For more details you can also check the official Framework integration guide.

This project is created with Vue Cli

I have created another framework integration guide to use stencil components

• Stencil components in React
• Stencil components in Angular
• Stencil components in javascript

In order to use the custom element library within the Vue app, the application must be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the main.js file.

This example use the stencil component from the following project

• Product & Cart showcase example

• Add the component to the dependencies
• Import the component
• Consume the component
• Using component

Add the component to the app dependencies in package.json

// package.json

"dependencies": {
  ...
  "@ranjeetsinghbnl/product-mgmt-stenciljs": "0.0.1"
}

or Install it npm install @ranjeetsinghbnl/product-mgmt-stenciljs

import the component in the main.js file

import {
  applyPolyfills,
  defineCustomElements as defineProductMgmtExp
} from '@ranjeetsinghbnl/product-mgmt-stenciljs/loader';

Telling Vue to ignore the custom element tags see. Add the following code to your main.js file. You can also use the component names or regular expression for that.

Vue.config.ignoredElements = [/mf-\w*/];

or

Vue.config.ignoredElements = [
    'mf-product-view',
    'mf-product-cart'
];

and Bind the custom elements to the window object

applyPolyfills().then(() => {
  defineProductMgmtExp(window);
});

Now The components should then be available in any of the Vue components

You can use it

<mf-product-view></mf-product-view>

<mf-product-cart></mf-product-cart>

To know more about the components. Please check the Product & Cart showcase example

Note: I have include the bootstrap 4 css to give style to the stencil components. Because they are open to design changes. Their is no style added to components i have used in the showcase

npm install

npm run serve

npm run build

npm run test

npm run lint

See Configuration Reference.