I put a lot of effort into this weekly newsletter, and you can support my work in the following ways:
Have a great week ☀️
Props are the standard way to pass data from the parent to a child component.
This works well in simple scenarios but has some drawbacks if a deeply nested component needs data from a distant ancestor component:
Take a look at the
<Footer> component: It needs to declare and pass the props to the
<DeepChild> component, even if it does not care about them. Imagine a longer component chain between the parent and the deep child component; all would be affected along the way. This is called "prop drilling" and is no fun for us developers.
Usually, we solve this problem by using state management solutions like Pinia.
But sometimes, we want to share data from a parent component to all its children components without using a store. If you are using Vue 2, you must either use a state management solution or pass the props down to the deeply nested component.
Vue 3 introduced a new concept to solve prop drilling with
The principle is simple:
The first argument of the
provide() function is the injection key, which can be a string or a
Symbol. The descendant component uses this key to look up the desired value to inject. The second argument is the value, which can be of any type, including reactive state such as refs. Using reactive values in the
provide() function establishes a reactive connection to the descendant component that injects the value.
As you can see in the above example, it is valid to call
provide multiple times with different injection keys and values.
To inject data provided by an ancestor component, we use the
For more details, check the official docs.
👉🏻 Michael explains the NuxtErrorBoundary component that comes with Nuxt 3.
👉🏻 It makes handling client-side errors a breeze.
👉🏻 It’s common for applications to use threaded comment replies for managing communication.
👉🏻 In Vue, we can use recursion to help manage displaying those threads.
Image created with CodeSnap.dev
Required<Type> constructs a type consisting of all properties of
Type set to required:
It's the opposite of
👉🏻 Don’t add unneeded context
👉🏻 Use enum
👉🏻 Function names should say what they do
👉🏻 Prefer functional programming over imperative programming
👉🏻 Avoid negative conditionals
👉🏻 and more...
👉🏻 This tutorial is part 2 of 3 of a series.
👉🏻 It shows how to we migrating a Node.js project to TypeScript.
👉🏻 "In this post, we’ll develop a deeper understanding of CSS by diving into the underlying issues that make it difficult to scale."
👉🏻 Building a solid architecture can be a waste of energy and can stop teams from working fast.
👉🏻 "The inner workings of HTTP/2 were intimidating and mysterious before I wrote this article, and now they feel somewhat approachable."
👉🏻 A collection of free Tailwind CSS components that can be used in your next project.
👉🏻 A TypeScript compiler that can do type checking up to 1000x faster and claims to “bring TypeScript to the next level.”
👉🏻 Automatically create TypeScript barrels for your entire code base.
👉🏻 Barrels help to simplify large blocks of import statements at the top of files and help to group up related functionality.
👉🏻 "an intentionally infuriating API to request inane and ultimately unachievable password criteria intended to deliberately frustrate the user."