How to use Web-Components in Vue

How to use Web-Components in Vue

Learn how to seamlessly integrate and use Web Components in VueJS, including custom properties and events

VueJS is a new JavaScript framework that has recently gained a lot of popularity for its simple API and easier learning curve. In this post, we will learn how to use a web component in a Vue application. We will create a Vue CLI project and add a simple dropdown web component to the project. You can learn more about the Vue CLI in the topic of Morioh.com

Our dropdown is a simple web component I have built and published at the npm package web-component-essentials. Here is a clip of our dropdown web component.

Creating a Vue Project with the Vue CLI

For this example we will use the Vue CLI tool to generate a Vue project. The Vue CLI will provide all the tooling we need to get started building and running our application.

First, we need to install the Vue CLI via NPM. We can install the Vue CLI by running the following command:

npm install -g @vue/cli

Once installed we can create our project by running the following:

vue create my-app

This command will create a basic Vue project as well as installing any dependencies. Once installed we can install our dropdown by running the following:

npm install web-component-essentials --save

This command installs the dropdown package that we published in an earlier chapter. Once installed we can now import our dropdown into our Vue application. In the main.js we can add the following:

import Vue from 'vue'
import App from './App.vue'
import 'web-component-essentials'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

To run our Vue application, we can run the following command:

npm run serve

This command will start up our Vue app at localhost:8080. Let’s take a look at the HelloWorld.vue component. Vue components use a single file style of organization. For example, Angular components have a TypeScript, HTML and CSS file. Vue components have a single file that contains all three parts of the component. We will start with the template first.

Property and Event Binding in Vue

Web components communicate primarily three ways, setting properties (input), emitting events (output), and accepting dynamic content between the element tag with content slots. The dropdown component in our example uses all three of these APIs.


// HelloWorld.vue
<template>
  <div>
    <h1>VusJS Application using Web Components</h1>

    <p>
      {{show ? 'open' : 'closed'}}
    </p>

    <x-dropdown :title="myTitle" @show="log">
      Hello from Web Component in Vue!
    </x-dropdown>
  </div>
</template>

We can see an expression that shows if the dropdown is open or closed, {{show ? 'open' : 'closed'}}. On the dropdown component, we are using Vue’s binding syntax. This binding syntax works with all HTML elements as well as custom elements from using web components. This template binding syntax is similar to the element binding syntax in Angular.

To bind to a property, we use the : character. To bind a property to the dropdown title property, we write :title="myTitle". In our Vue component, we have a myTitle property that has its value assigned to the title of the dropdown component.

To listen to events, we use the @ character. Our dropdown has a single event show. To listen to this event, we write @show="log". This event binding will call the log method on our Vue component whenever the show event occurs.

Next, let’s look at the Vue component JavaScript.

<script>
export default {
  name: 'HelloWorld',
  data: function () {
    return {
      myTitle: 'project-vue',
      show: false
    }
  },
  methods: {
    log: function (event) {
      console.log(event);
      this.show = event.detail;
    }
  }
}
</script>

The Vue component definition has data and method properties we want to bind on our Vue template. In our example, we have the two data properties, myTitle and show. We have a single method log which we saw being bound to the @show event.

Conclusion

Using web components allow us to share UI components between any framework of our choice. VueJS is a great option to build JavaScript applications and works very well with web components out of the box.

For the most part, you would use Web Components as leaf node components, and Vue for views and other composite components.

View Demo Code on Github

I hope this tutorial will surely help and you if you liked this post, share it with all of your programming buddies!

vue-js javascript web-service web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

Web Development Services

As one of the best Web Application Development Company, it provides a fine quality mobile app development service at an affordable price. Especially, it encourage start-ups that have unique ideas, by offering a more competitive price

Top Web Application Developer

You can also contact a web application development company for your business but then why not to contact the best web application development company that can turn up your business and customer satisfaction ratio to sky touching heights.