Building custom elements from Vue using the CLI
Tags: vue, customelements, javascript, webdev
Published: 2019-07-16 17:42:06

If you're working in Vue, the Vue CLI is an amazing thing. There are a lot of moving parts in modern JavaScript development and the CLI makes managing these very easy.

One of the niceties that the CLI will give you is the ability to compile your Vue components into custom HTML tags. I've talked about how to get this set up in [What are custom HTML elements](What are custom HTML elements.md) and in [Building custom elements from Vue CLI](Building custom elements from Vue CLI.md). This article is about how to then compile and export those components so that they are ready to put on any web page.

## Transpiling Vue to Custom Components

The process of turning Vue into an official, browser supported Web Component is handled via a Vue build tool called `@vue/web-component-wrapper`. This will take your component and build it into the format needed by the [Web Component standard](https://developer.mozilla.org/en-US/docs/Web/Web_Components). This transpiling from a Vue component to a custom component is already built into Vue CLI, so if your project was created with Vue CLI, all you have to do to export a component to a custom component is this:

```bash
vue-cli-service build --target wc --name my-blink 'src/components/Blink.vue'
```

This will create three files in your `dist` folder:

| Filename              | Purpose                                            |
| --------------------- | -------------------------------------------------- |
| `my-blink.js`         | The code for your component minus the Vue library  |
| `demo.html`           | A simple demo HTML file for your component         |
| `my-blink.js.map`     | The debugging information for your browser         |
| `my-blink.min.js`     | The minified version of the component              |
| `my-blink.min.js.map` | The debugging information for the minified version |

The important thing to know here is that you must include the Vue library in your HTML wherever you want to use your component. It's not included in the build itself. If you look at the demo HTML file that was created during the build process, you'll see that in action.

```html
<script src="https://unpkg.com/vue"></script>
<script src="./my-blink.js"></script>

<my-blink></my-blink>
```

You can then use that `demo.html` file to test out the component.

## What if you have more than one component?

What if you have multiple components that you want to turn into Web Components? You don't need to build each one individually, you can instead build them all at once.

```bash
vue-cli-service build --target wc-async --name demo 'src/components/*.vue'
```

This will build your components into multiple files that are actually lazy loaded into the browser. If you don't use a certain component, its file won't be loaded in. Nice!

But what about the `--name`? When you defined that in your single component build, it made the tag that name. But here you have multiple components. What does it do now?

Here, `--name` is used as a prefix for your tags. So if your Vue component is named `blink` and the `--name` is defined as `demo`, then your tag will export as `demo-blink`.

## And that's it

Now you can build your Vue components, take the `js` files from `dist` and drop them onto any web page. Then just include the tag anywhere in your HTML and **BOOM** Vue components on any page.