https://github.com/alesgenova/stenciljs-in-vue

Stenciljs components in Vue: step by step guide
https://github.com/alesgenova/stenciljs-in-vue

stenciljs vue webcomponents

Last synced: 3 days ago
JSON representation

Stenciljs components in Vue: step by step guide

• Host: GitHub
• URL: https://github.com/alesgenova/stenciljs-in-vue
• Owner: alesgenova
• Created: 2018-06-17T21:05:51.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-02-17T12:58:37.000Z (over 3 years ago)
• Last Synced: 2024-09-20T03:01:38.419Z (7 days ago)
• Topics: stenciljs, vue, webcomponents
• Language: Vue
• Homepage:
• Size: 15.6 KB
• Stars: 15
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Stencil components in Vue

[Stencil](https://stenciljs.com/) 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](https://vuejs.org/) app.

The starter Vue app was created with [Vue CLI](https://cli.vuejs.org/).

## Similar guides

- [Stencil components in React](https://github.com/alesgenova/stenciljs-in-react.git)

- [Stencil components in Angular](https://github.com/alesgenova/stenciljs-in-angular.git)

## Table of contents

- [Add the component(s) to the dependencies](#1-add-the-components-to-the-dependencies)

- [Import the component(s)](#2-import-the-components)

- [Consume the component](#3-consume-the-component)

- [Appendix: Attribute vs Prop](#appendix-attribute-vs-prop)

## 0: Build a stenciljs component and publish it to npm

Creating your first stencil component is very easy and it is well documented [here](https://stenciljs.com/docs/my-first-component). 

This example will consume two components:

- [@openchemistry/molecule-vtkjs](https://github.com/OpenChemistry/oc-web-components/tree/master/packages/molecule-vtkjs) : To display molecular structures

- [split-me](https://github.com/alesgenova/split-me) : To create resizable split layouts

## 1: Add the component(s) to the dependencies

Add the component to the app dependencies in `package.json`

```json

// package.json

"dependencies": {

  ...

  "@openchemistry/molecule-vtkjs": "^0.3.2",

  "split-me": "^1.1.4"

}

```

## 2: Import the component(s)

Import the component in the `main.js` of the app:

```js

import { defineCustomElements as defineMolecule } from '@openchemistry/molecule-vtkjs/loader';

import { defineCustomElements as defineSplitMe } from 'split-me/loader';

defineMolecule(window);

defineSplitMe(window);

```

## 3: Consume the component

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.

```js

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.

```html

```

## Appendix: Attribute vs Prop

`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.

```html

```

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.

```html

```