How to Create Custom v-model for Web Components

Introduction:

Fortunately, Vue fully supports Web Components according to custom-elements-everywhere.com 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 the same way across all custom elements!

For simplicity purposes, I’m using Wired Elements for the Web Components example. Wired Elements are a set of common UI elements with a hand-drawn, sketchy look. The library uses LitElement for creating Web Components.

Overview:

  1. Install Wired Elements
  2. Import Input Element
  3. Create a custom directive
  4. Test input element with the custom directive

1. Create Vue App:

npm install -g @vue/cli @vue/cli-service-global
vue create vue-custom-v-model-example

2. Install Wired Elements:

npm i wired-elements

3. Import Input Element:

Quick summary of the code above:

  • Imported “wired-input”
  • Created a new “txtValue” data to use in v-model
  • Print out the “txtValue” on the screen as we are typing

Now as expected, when typing, nothing is printed:

4. Create a custom directive:

Here are some details of what we did in the code above:

  • In line 4, we are using the “bind” hook function (when the directive is first bound to the element)
  • In line 6, we are accessing the context data from “vnode” object to update the binding value in the “inputHandler” function.
  • Line 7, simply add an event listener to the element

5. Test input element with the custom directive

First, let’s update App.vue to use the new directive:

Here is a demonstration of the final working code:

You can access the full repository here. I hope you enjoyed learning from this article and if you have any questions, please leave a comment below.

For more related articles, you can visit my site or signup for the latest articles and updates. Bye for now 😊

Originally published at https://muhimasri.com on April 10, 2021.

UI architect and JavaScript specialist with emphasis on efficiency and great user experience. https://muhimasri.com

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