Javascript is required
Weekly Vue News Logo Weekly Vue News

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

Weekly Vue.js News - #46 - Use fallthrough attributes

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

Hi 👋

In this issue, I have curated a few interesting articles and tweets to help you in your journey to become a Vue expert.

You'll learn how to use fallthrough attributes in Vue and how to copy text to clipboard using the Clipboard API.

Have a great week ☀️

Vue Tip: Use fallthrough attributes

A "fallthrough attribute" is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.

For example, given a <MyButton> component with the following template:

And a parent using this component with:

The final rendered DOM would be:

If the child component's root element already has existing class or style attributes, it will be merged with the class and style values that are inherited from the parent:

Then the final rendered DOM would now become:

Vue News

📹 An Introduction to Vue.js State Management with Pinia 📹 An Introduction to Vue.js State Management with

👉🏻 Pinia is now Vue’s official state management library (it was previously Vuex).

👉🏻 Tyler does a great job of sharing his excitement for it here.

How to Create a Custom Code Block With Nuxt Content v2 How to Create a Custom Code Block With Nuxt Content

Learn how to define a custom code block in Nuxt 3 and Nuxt Content v2

JavaScript Tip: Write text to the system clipboard

Example cde for Clipboard API

The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Supported by all modern browsers.

A typical use case is a button to copy the code to the clipboard:

Copy code button in a code block component on the bottom right

Web Development News

JavaScript Tip Collection JavaScript Tip

Here's a goldmine of lesser known JavaScript tips

Anatomy of a JavaScript Framework Anatomy of a JavaScript Framework

👉🏻 In this article, Fabio explores the very first commits on the Vue.js open source GitHub repository.

👉🏻 He retraces legendary developer Evan You's first few lines of JavaScript on the Vue repository.

How we deploy to production over 100 times a day How we deploy to production over 100 times a Our success relies on us rapidly shipping new features. To achieve this rapid release cadence, we’ve optimised our engineering culture, tooling, and architecture to go from idea to production as frictionless as possible, without sacrificing safety.

Two lines of CSS that boosts 7x rendering performance

👉🏻 Murtaza explains how the code works and provides alternatives.

👉🏻The code is most useful when a website needs to render a huge list/grid of data at the mount of the application.

Quote of the week

Tools & Misc

🛠️ AutoAnimate 🛠️

👉🏻 AutoAnimate is a zero-configure animation utility that adds smooth transitions to web apps. 👉🏻 It can be used with Vue, React, or any other JavaScript application.

🛠️ ugit 🛠️

ugit helps undo git commands from 19+ git scenarios.

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.