Blog

Vue.js, Web components

Web components with Vue.js

For one client I’m developing two digital stores. One is a custom B2B solution, the other a B2C Magento platform. In both, a custom component is needed and I thought that building a web component could be a good strategy.

The general idea is to use Vue.js to build the component and then share it between both stores. I must say it is my first try with web components!

In the start of this investigation, I used https://www.webcomponents.org to learn the fundamentals. It is important, I think, to be able to produce a web component without Vue and, then, learn how to take advantage of Vue’s power to do it more efficiently.

In fact,  https://www.webcomponents.org/ didn’t provide that much deep information, so the next page to follow was https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements.

Maybe a good definition of web component is just a “custom html tag”. For example, we can develop a web component called “my-component” and use it in our html code like any other tag: <my-component></my-component>.

After some more reading and seeing a very nice video (https://www.youtube.com/watch?v=mTNdTcwK3MM) I was able to write the most simple example of a web component:

It works!

So, what have we done? It was a three-step process:

  • We declared a new class that extends HTMLElement. In that class, we used “connectedCallback” to write the innerHTML of the component. “connectedCallback” is called after the element is added to the DOM.
  • Defining the class is not enough. We must tell the browser to use the new class for a custom element. We do this with customElements.define(“my-component”, MyComponent);
  • Finally, we only have to use the component with the tag defined above, <my-component>.

For sure, there is a lot more to say and learn about web components in general. But our aim is to use Vue.js.

With vue-cli, version 3, the heavy work is already done. All that is needed is to change the usual build target to “wc”. More details on build targets can be found at https://cli.vuejs.org/guide/build-targets.html.

We can start to create a new project with the usual command, “vue create project-name” and wait for a while so that all packages are downloaded.

Now, instead of writing “vue run build” to build the application, we add a new script in the package.json, “wc: vue-cli-service run build –target wc –name my-component”. Running this new command will result in two files, “my-component.js” and “my-component.min.js” where our component is encapsulated.

We can use it just like in the first example but importing Vue before. And, of course, the JavaScript code for the component is now in a separated file, that we must import with a script tag:

After cleaning up a little the default templates, App.vue and HelloWorld.vue, we get the expected result. A brand new web component built with Vue:

Sure, lots of challenges are waiting, but I’m happy with this start.

Leave your thought here