Javascript is required
Weekly Vue News Logo Weekly Vue News

Document is empty, overwrite this content with #empty slot in <ContentDoc>.

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

Migrated Issue
Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

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

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

1. Create the custom element

To create the custom element, we use defineCustomElement:

Image created with

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.

2. Register the custom element with the DOM

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

3. Use the custom element in your HTML

Finally, we can use our custom element in HTML:

Image created with

Check out the docs for more details on how this works.

Curated Vue Content

📕 Hybrid Rendering in Nuxt.js 3

👉🏼 Nuxt 3 has a lot of rendering options. There's SSR, SSG, SPA...

👉🏻 In this article, Daniel breaks down each option.

📕 A guide to automated testing in Vue with Cypress

👉🏻 In this article, Paul teaches us how to test individual Vue components with Cypress.

👉🏻 "If you’re using Vue, Cypress is one of the best tools available for testing your application."

📹 Vue's Road to Vite

👉🏻 As Haoqun shared in his talk at ViteConf, it's not only the speed that makes Vite attractive.

👉🏻 Slides:

TypeScript Tip: Avoid Default Exports

Let's first take a look at an example with default exports using export default:

Image created with

And now the same example but without the default export:

Image created with

Why is it better?

🤜🏻 Better refactoring support

🤜🏻 Typo protection

🤜🏻 Better tree shaking

🤜🏻 Auto import / completion

Curated Web Development Content

📕 Type-level TypeScript

👉🏻 An online course to take your TypeScript skills from intermediate to advanced.

👉🏻 It will give you a solid understanding of the type system's fundamentals and guide you through its most advanced features.

📕 Let's Talk About Web Components

👉🏻 Brad looks at how web components can help deliver design system component libraries and their compatibility with JS libraries and frameworks.

📕 Toyota Suffered a Data Breach by Accidentally Exposing A Secret Key Publicly On GitHub

👉🏻 Toyota revealed they had accidentally exposed a credential allowing access to customer data in a public GitHub repo for nearly 5 years.

🛠️ DevTools-X

👉🏻 A cross-platform collection of offline-first developer utilities similar to those native to Mac/Windows.

👉🏻 Includes utilities for color, images, JSON, Regex, SQL, and even a live React playground.

🛠️ SurveyJS

👉🏻 A form builder library for creating data-driven, multi-langauge survey forms.

👉🏻 It has a ‘pro’ level and some related commercial services but is MIT licensed at the base.

🛠️ Day.js

👉🏻 Fast 2kB alternative to Moment.js with the same modern API.

Quote of the Week

Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
© 2023 All rights reserved.