View profile

Weekly Vue News - #66 - Defining and Registering Vue Web Components

Michael Hoffmann
Michael Hoffmann
Hi 👋
I’m available for work from 9st January 2023, see tweet below.
This week I’ll work on a theme for Slidev, an amazing tool for developers to create presentations.
Have a great week ☀️

Michael Hoffmann
🔥 I am available from 9st January 2023 🔥

I am looking for a new project with focus on frontend

👉🏻 Frontend: Vue
👉🏻 Backend: Java, Node.js, willing to learn anything new

I work fully remote and 40h/week.

More info are available at: https://t.co/FKp81JMSbn https://t.co/DHinXdyL1T
Vue Tip: Defining and Registering Vue Web Components
Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. Vue has excellent support for both consuming and creating custom elements.
The main advantage of web components is that they can be used with any framework or even without a framework.
In three simple steps, let’s look at how we can create a web component from a Vue SFC (single-file component).
To create the custom element, we use defineCustomElement:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
You may have noticed that our SFC uses the special file ending .ce.vue.
It inlines the SFC’s <style> tags as strings of CSS and exposes them under the component’s styles option.
During production build with default tooling setup, the <style> inside the SFCs are extracted and merged into a single CSS file. But for the custom component, the <style> tags should be injected into the custom element’s shadow root.
Next, we can register the custom element using the define method. After registration, all <my-example> tags on the page will be upgraded afterward:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
Finally, we can use our custom element in HTML:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
Check out the docs for more details on how this works.
Curated Vue Content
TypeScript Tip: Avoid Default Exports
Let’s first take a look at an example with default exports using export default:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
And now the same example but without the default export:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
Why is it better?
🤜🏻 Better refactoring support
🤜🏻 Typo protection
🤜🏻 Better tree shaking
🤜🏻 Auto import / completion
Curated Web Development Content
Quote of the Week
Did you enjoy this issue? Yes No
Michael Hoffmann
Michael Hoffmann @mokkapps

This weekly Vue newsletter gives you high-quality tips and curated content to help you become a Vue.js expert.

Additionally, it provides content about web development topics like TypeScript, JavaScript, HTML5, and CSS3.

Published each Monday since June 2021.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther Straße 19, 81375 Munich, Germany