Using Web Components in Vue
Tags: vue, webcomponents
Published: 2019-09-02 01:05:53

---
title: Using Web Components in Vue
description: Learn how to seamlessly integrate and use Web Components in VueJS, including custom properties and events.
keywords: Vue, VueJS, Web Components, Cory Rylan
tags: vue, web-components
canonical_url: https://coryrylan.com/blog/using-web-components-in-vue
published: true
---

This post is a modified excerpt chapter from my new EBook [Web Component Essentials](https://webcomponent.dev)

[VueJS](https://vuejs.org) 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](https://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.

![Web Component in VueJS](https://thepracticaldev.s3.amazonaws.com/i/wo1o637tk5nfmrq74ngl.png)

## 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:

```bash
npm install -g @vue/cli
```

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

```bash
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:

```bash
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:

```javascript
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:

```bash
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.

```html
// 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.

```html
<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:

![Web Component in VueJS](https://thepracticaldev.s3.amazonaws.com/i/wo1o637tk5nfmrq74ngl.png)

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.

Find the full working [demo here](https://github.com/coryrylan/web-components-in-vue)!