Stencil is not a JS framework. It is a compiler that produces a reusable web component that can be embedded anywhere else.
This is a step by step guide to consume a non-trivial stencil component in a Vue app.
The starter Vue app was created with Vue CLI.
Creating your first stencil component is very easy and it is well documented here.
This example will consume two components:
Add the component to the app dependencies in package.json
// package.json
"dependencies": {
...
"@openchemistry/molecule-vtkjs": "^0.3.2",
"split-me": "^1.1.4"
}
Import the component in the main.js
of the app:
import { defineCustomElements as defineMolecule } from '@openchemistry/molecule-vtkjs/loader';
import { defineCustomElements as defineSplitMe } from 'split-me/loader';
defineMolecule(window);
defineSplitMe(window);
To prevent Vue from complaining that your component has an unrecognized tag, add the following in main.js
. Use either the full name, or regex if you want to capture a family of components.
Vue.config.ignoredElements = [
"oc-molecule-vtkjs",
"split-me"
];
It is now possible to use the tag provided by the stencil component in any template of the app.
<oc-molecule-vtkjs v-bind:cjson.prop="molecule" />
oc-molecule-vtkjs
has a property named cjson
that expects an object (or a JSON.stringified object).
Strings can be passed directly as attributes to a stencil component.
<oc-molecule-vtkjs v-bind:cjson="moleculeStr" />
While this would work, it is probably a good idea to avoid the JSON.stringify()
and JSON.parse()
and directly pass the object itself to the component.
Vue provides a way to explicitly pass the object as a property rather than an attribute, it is as simple as adding .prop
to the property name of the stencil component.
<oc-molecule-vtkjs v-bind:cjson.prop="molecule" />