Using Web Components in Vue

This post is a modified excerpt chapter from my new EBook Web Component Essentials

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 at cli.vuejs.org.

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.

If everything is hooked up correctly we should see something similar to the following in the browser:

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.