Skip to content

ranjeetsinghbnl/stenciljs-vue

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

Stencil component in Vue

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

Similar guides

I have created another framework integration guide to use stencil components

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

Table of contents

Add the component to the dependencies

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

import the component in the main.js file

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

Consume the component

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

Using component

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

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

About

Stenciljs component in vuejs step by step guide

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published