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.
- Add the component(s) to the dependencies
- Import the component(s)
- Consume the component
- Appendix: Attribute vs Prop
Creating your first stencil component is very easy and it is well documented here.
This example will consume two components:
- @openchemistry/molecule-vtkjs : To display molecular structures
- split-me : To create resizable split layouts
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" />