I wrote in a previous article the importance of Web Components and how to make them work with React. Today, I’m focusing on a Vue example with a Web Component input element.

Fortunately, Vue fully supports Web Components according to but I faced a small inconvenience while using v-model directive with an input element.

V-model is a built-in directive in Vue that makes data binding easier with less code.

The code below:

Is the same as:

Currently, we can’t use v-model in a Web Component but we can create our own custom directive to make it behave…

This is very interesting, thanks! The GitHub links are not working, would be great if we can see a working example.

Thanks for an amazing introductory to web components! I fully agree with you regarding Web Components complementing frameworks such as Vue or React. They work together very nicely especially if you are building a framework-agnostic design system that works across multiple technologies.

I recently wrote about creating thin wrappers to make web components work with React if it interests you.


This is very informative, thanks! One of the things that I really like about design tokens (as a developer) is that it imposes an opinionated variables structure on developers. I used to see developers struggling with getting the right naming conventions and ending up creating redundant colors, sizes… which leads to a scalability nightmare.


Web Components are of great use when it comes to creating a future proof component-based design system that can be interoperable and shared across multiple products.

Unfortunately, React is one of the few modern libraries that does not have full support to Web Components, especially when it comes to handling events. The reason is that React implements its own synthetic event system, it cannot listen for DOM events coming from Web Components.

The great news is that you don’t need to rewrite all your design system from scratch using React. …


In this article I will explain a simple approach I took in one of my projects that required me to develop a dynamic table where users can read and modify fields. The challenge was that there is no set of defined tables or data models from the back-end. At any time, a new data model can be created or removed from the database and the front-end is required to adapt without having to add/remove tables manually.

So from the very beginning I decided to go with an abstract approach solution to make the table model dynamic and schema agnostic. For…


In this article I’d like to share with you how to create a reusable custom checkbox element using CSS and VueJS. Most of us are used to having custom UI elements out of the box when using Bootstrap, Material or other libraries but in my recent project I was asked not to use any of the UI libraries. So I accepted the challenge, rolled up my sleeves and went right into it 💪

The goal here is to change the styling of the checkbox using pure CSS (with SCSS support) and enable color customization for developers

In this article we will learn how to convert an image (containing a simple form) to an HTML form using Amazon Textract and NodeJS. Amazon Textract is a service that automatically extracts text and data from scanned documents. It’s an AI powered optical character recognition (OCR) that makes it very simple to accurately pull out content from an image.

One of Textract’s strengths is the ability to identify a form in an image and extract the data with its associated relationship. Meaning, if we look at a basic form:

Muhi Masri

UI architect and JavaScript specialist with emphasis on efficiency and great user experience.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store