Weekly Vue News — #66 — Defining and Registering Vue Web Components
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:
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:
3. Use the custom element in your HTML
Finally, we can use our custom element in HTML:
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: https://docs.google.com...
TypeScript Tip: Avoid Default Exports
Let’s first take a look at an example with default exports using export default:
And now the same example but without the default export:
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.
