JS&Friends Conf: Creating HTML tags with Vue & Web Components - Joe Erickson
Tags: javascript, conference, shadowdom, webcomponents
Published: 2019-08-18 01:58:45

---
title: JS&Friends Conf: Creating HTML tags with Vue & Web Components - Joe Erickson
published: true
description: Summary of the talk by Joe Erickson at JS&Friends
tags: javascript, conference, shadow-dom, web-components
series: jsandfriends2019
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pz1avso4lhunp9wa58qw.jpg
---

## Creating HTML tags with Vue & Web Components - [Joe Erickson](https://twitter.com/firstclown)

![Joe Erickson](https://thepracticaldev.s3.amazonaws.com/i/zqbnque0nqjhjs5e9dab.jpg)

Joe of [Tech Elevator](https://www.techelevator.com/) gave a talk about creating web components. Similar to a previous talk; however, Joe's spin on it involved creating the them using Vue.

Joe flashed us back to 1997:

- Deep Blue beats Kasparov
- Microsoft buys a stake in Apple, saving the company
- Harry Potter and the Philosopher's Stone was published
- **All major browsers supported the `<blink>` tag**

And he intended that day to bring it back, at least for right then. Joe went through the steps to scaffold the initial code with Vue CLI and write out the component itself (using a different method of creating the blink animation).

### Creating the component

Using Vue's template syntax, the component can be written in separate blocks for markup, logic, and styling.

Blink.vue

```html
<template>
  <span ref="blinkyText"><slot /></span>
</template>

<script>
  export default {
    name: "blink",
    props: {
      interval: {
        type: Number,
        default: 500
      }
    },
    mounted() {
      setInterval(() => {
        this.$refs.blinkyText.classList.toggle("onoff");
      }, this.interval);
    }
  };
</script>

<style>
  .onoff {
    visibility: hidden;
  }
</style>
```

### Building the component

By default Vue CLI sets its scripts to build an application. The _build_ script needs to be tweaked a little.

package.json

```json
...
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build --target wc --name my-blink 'src/components/Blink.vue'",
  "lint": "vue-cli-service lint"
},
...
```

Now `npm run build` can be executed and it will be created in the dist folder. Inserted the component into a page entails including the blink.js file as well as the Vue script - and don't forget the tag itself!

```html
<meta charset="utf-8" />
<title>my-blink demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./my-blink.js"></script>

<my-blink interval="1000">Blink every second</my-blink>
```{% twitter 1157367223230640130 %}

Joe also gave us examples of real and useful components that he has made, how they can interact with each other, and how to build them all at once. And just because they were built with Vue doesn't mean they have to be used in a completely Vue-made app. They can be used in a plain HTML page as long as the Vue script is called.

While the discussion and concepts were similar to Martine's, knowing there is a different way to create a component that can be used freely in non-frameworked sites is great to know.

[← Back to main JS&Friends article](https://dev.to/aromig/my-first-dev-conference-javascript-friends-fh7)