View profile

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

Michael Hoffmann (Mokkapps)
Michael Hoffmann (Mokkapps)
@mokkapps
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
Michael Hoffmann
ℹ️ Vue 2.7 will be the final minor release of Vue 2.x and its estimated 'end of life' date will be at the end of 2023

https://t.co/z81LFsMx51 https://t.co/WH1ZHfH90m
📹 An Introduction to Vue.js State Management with Pinia
📹 An Introduction to Vue.js State Management with Pinia
👉🏻 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.
www.youtube.com
How to Create a Custom Code Block With Nuxt Content v2
How to Create a Custom Code Block With Nuxt Content v2
Learn how to define a custom code block in Nuxt 3 and Nuxt Content v2
mokkapps.de
JavaScript Tip: Write text to the system clipboard
Example cde for Clipboard API
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
Copy code button in a code block component on the bottom right
Web Development News
JavaScript Tip Collection
JavaScript Tip Collection
Here’s a goldmine of lesser known JavaScript tips
markodenic.com
Michael Hoffmann
💡 Why every developer should be motivated to write tests:

👉🏻 They avoid regression

👉🏻 They can help to regularly and quickly check if all requirements are fulfilled

👉🏻 They can help to document the business logic in form of test cases

What do you think?
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.
www.freecodecamp.org
How we deploy to production over 100 times a day
How we deploy to production over 100 times a day
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.
monzo.com
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.
dev.to
Quote of the week
Tools & Misc
🛠️ AutoAnimate
🛠️ 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.
github.com
🛠️ ugit
🛠️ ugit
ugit helps undo git commands from 19+ git scenarios.
github.com
Did you enjoy this issue? Yes No
Michael Hoffmann (Mokkapps)
Michael Hoffmann (Mokkapps) @mokkapps

Hi 👋

My name is Michael Hoffmann and I'm a Senior Frontend Developer, Freelancer and Blogger.

I focus on Vue.js, JavaScript, TypeScript and Spring Boot. Occasionally I also give career & freelancer advice.

My weekly emails reflect this preference.

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