Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Vue and Web Components
3.
Using Component in Vue
4.
Using Custom Elements in Vue
4.1.
Skipping Component Resolution
4.2.
Passing DOM Properties
5.
Drawbacks of Web Components 
6.
FAQs
7.
Key Takeaways
Last Updated: Mar 27, 2024

Vue and Web Components

Author Juhi Sinha
0 upvote

Introduction

Vue JS is a single-page application framework based on JavaScript. The ability to use components is a crucial feature of Vue. Web Components are a set of web platform APIs that help us create new custom, reusable, and encapsulated HTML tags for web pages and apps.

This article will learn more about Vue and web components in detail. So, without any further ado, let's get started!

Vue and Web Components

Custom HTML elements that can be used and reused in web apps and pages are known as web components. Web components are browser-specific and can be used in the same way as regular HTML elements. We can consume our web component in React, Angular, or even without any framework at all, regardless of what tools we used to create it.
 

Vue and Web Components are complementary technologies. Vue provides support for creating and consuming custom elements.

Using Component in Vue

To get Vue to work with the component, all we have to do is allow it in:

Vue.config.ignoredElements.

This simply informs Vue that the element/component originates from a source that Vue is unaware of, preventing the compiler from complaining.

import Vue from 'vue';
import App from './App.vue';
Vue.config.ignoredElements = [
 'x-ticking-paragraph'
]
new Vue({
 el: '#app',
 render: h => h(App)
});

 

We can use the component in the same way we would any other. Reactivity is preserved.

<template>
 <div id="app">
   <h1>Vue Web Components</h1>
   <x-ticking-paragraph :contents="Paragraph Contents" @tick="logTick"></x-ticking-paragraph>
 </div>
</template>
<script>
export default {
 data() {
   return {
     paragraphContents: `In a Web Component, I'm data from Vue rendering.`
   }
 },
 methods: {
   logTick() {
     console.log(`The paragraph began to tick once more. >_>`)
   }
 }
}
</script>
 

The best thing is that we don't have to make any changes to either the Web Component or our Vue app to make them work together. We can even integrate elements that use other frameworks like React or Polymer internally.

Whether we are using Web Components alongside Vue or not will determine how useful this is to us. At the very least, it shows that if Web Components are the way of the future, Vue is future-proof.

Using Custom Elements in Vue

Consuming custom elements in a Vue application is similar to using native HTML elements, considering the following points:

Skipping Component Resolution

Vue will try to resolve a non-native HTML tag as a registered Vue component before rendering it as a custom element by default. During development, Vue will issue a "failed to resolve component" warning. We can use the compilerOptions.isCustomElement to tell Vue that certain elements should be treated as custom elements and that component resolution should be skipped. 
 

Because this is a compile-time option, it should be passed via build configs when using Vue with a build setup.

Example In-Browser Configuration: 

app.config.compilerOptions.isCustomElement = tag => tag.includes('-')
You can also try this code with Online Javascript Compiler
Run Code

 

Example Vue CLI Configuration: 

// vue.config.js
module.exports = {
 chainWebpack: config => {
   config.module
     .rule('vue')
     .use('vue-loader')
     .tap(options => ({
       ...options,
       compilerOptions: {
     //Tag begins with ion- should be treated as a custom element.
        isCustomElement: tag => tag.startsWith('ion-')
       }
     }))
 }}
You can also try this code with Online Javascript Compiler
Run Code

Passing DOM Properties

We must pass complex data to custom elements as DOM properties because DOM attributes can only be strings. When a custom element's props are set, Vue 3 uses the in operator to check for the presence of DOM properties and prefers to set the value as a DOM property if the key is present. This means that if the custom element follows the recommended best practices, we won't have to worry about it in most cases.

However, there may be times when data must be passed as a DOM property, but the custom element fails to define or reflect the property properly. In this case, the .prop modifier can be used to force a v-bind binding to be set as a DOM property:

<my-element :user.prop="{ name: 'jack' }"></my-element>
<!-- shorthand equivalent -->
<my-element .user="{ name: 'jack' }"></my-element>
You can also try this code with Online Javascript Compiler
Run Code

Drawbacks of Web Components 

We can define reusable components with data passing, event emitting, and lifecycle management using vue and web components. On the other hand, Web Components APIs are very basic and low-level. We require several additional capabilities not covered by the platform to build an actual application:

  • A templating system that is both declarative and efficient;
  • A reactive state management system that allows for the extraction and reuse of cross-component logic;
  • A method for rendering components on the server and hydrating them on the client; should be both efficient and effective (SSR). When possible, Vue SSR compiles to string concatenation, which is faster than native custom elements SSR, which typically involves simulating the DOM in Node.js and then serializing the mutated DOM.

FAQs

 

  1. Is it possible to use Vue in HTML?
    The simplest way to get started with Vue is to download the development version script and paste it into our HTML file's head tag. Then we can begin writing Vue code within the script tags of the HTML file. Also, we can connect the Vue code to an existing element on our HTML page.
     
  2. Is Vue a library or a framework?
    Vue is a framework for creating progressive user interfaces. Depending on our needs, it is built from the ground up and can function as both a library and a framework. It is made up of a view layer-focused core library and an ecosystem of supporting libraries.
     
  3. Is Vue a front-end or a back-end framework?
    Vue is the default front-end JavaScript framework that has shipped with a Laravel installation since version 5.3.
     
  4. What are web components?
    Web Components are a set of web platform APIs that help us create new custom, reusable, and encapsulated HTML tags for use in web pages and apps.
     

Key Takeaways

In this article, we've learned Vue and web components in detail. 

If you are curious to learn advanced front-end web development, Coding Ninjas is here with one of the best courses available, which you can find here

Recommended Readings:

 

Thank you for reading!

 

Live masterclass