Weekly Vue.js News - #46 - Use fallthrough attributes
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 — www.youtube.com
👉🏻 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 — mokkapps.de
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 — markodenic.com
Here's a goldmine of lesser known JavaScript tips
Anatomy of a JavaScript Framework — www.freecodecamp.org
👉🏻 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 — monzo.com
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 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 helps undo git commands from 19+ git scenarios.
