Using Stenciljs with Vue.

Hi Friend,

I hope you are enjoying this crazy hot summer!

I have been recently working on a stencil with vuejs task, and faced some gotchas during implementation and wanted to share the learnings.

Vuejs + Stencil = 🆒

Why web components are awesome!

As developers we love to reuse our code. Unfortunately, the frontend makes it hard since it’s growing rapidly, and often times code becomes out dated as new technologies come out.

Use cases

Opensource:
We have seen many libraries trying to create the same UI components again and again. For example bootstrap, bootstrap-vue, react-bootsrap, angular-bootstrap.

Imagine the time saved if bootstrap code was being reused, it would have allowed lots of open source developers to focus on making bootstrap even more awesome.

Commercial:
Let’s stay you are a company that has several systems, and they are maintained by different teams one system uses react, the other uses plain old jquery-model. And maybe a smaller one is testing out Vuejs

To maintain the same branding across systems, the design team provides you with a styled button and therefore all teams would implement this button.

Introduction

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

The official website has already lots of amazing information, but if you want to go geeky I highly recommend this series of articles Introduction to web components which walks you through an introduction to implementing a custom element from scratch

Tools

There are several tools there that are built on top of web components that enables you to create your future friendly, reusable user interface layer.

Some of these tools are Hybrids ,LitElement ,Polymer, Slim.js ,Stencil. Find more details about them here.

Browser Support

Web components api specs are supported natively by Chrome, Firefox, Safari, Opera, Edge (partially). With polyfills available for unsporrted browsers.

Now back to Stencil.

Now that you are hooked if you weren’t already on web components, let me introduce to you stencil.

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

Building your Stencil component library

The docs are pretty simple and straight forward, there are bunch of step-by-step tutorials like this one.

Once you are done with your future friendly component library, publish it and enjoy code-use.

Consuming inside Vuejs

Integrating web components with Vuejs is so smooth, and as a Vuejs fan boy, I was happy (sorrynotsorry) deep down that react isn’t as smooth.

For vuejs/nuxt apps integration, the docs is a great starting point.

Gotchas!

Passing objects/arrays to Stencil

I have perviously written about the amazing v-bind directive, and now a cool modifier .prop which allows you to pass a DOM property instead of an attribute.

Bind as a DOM property instead of an attribute (what’s the difference?). If the tag is a component then .prop will set the property on the component’s $el.

Listen to stencil lifecycle hooks

Inside of your Vue app you sometimes would like to be notified of the stencils life cycle hooks. Since stencil emits native dom events, it’s very easy to emit an event and catch it.

TLDR

Stencil is an awesome tool that allows you to build re-useable web components that work on all major browser, easily integrable with Vuejs.

Thanks for reading!