JS&Friends Conf: Creating HTML tags with Vue & Web Components - Joe Erickson

Creating HTML tags with Vue & Web Components - Joe Erickson

Joe of Tech Elevator 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

<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

...
"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!

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

Adam Romig 🐧 🇵🇭

@adam_romig

Learning some neat stuff with web components again. This time from ⁦@firstclown⁩. #jsfriendsconf

19:07 PM - 02 Aug 2019

0 5

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