Weekly Vue News — #69 — Use Provide & Inject to Avoid Prop Drilling
Hi 👋
I’m still experimenting with my quick-tip videos; creating these videos is a lot of fun. You can find them on my social media profiles (Twitter, LinkedIn, Instagram).
I put a lot of effort into this weekly newsletter, and you can support my work in the following ways:
- Reply to this mail with a short testimonial about why you love this newsletter. I will reference it at weekly-vue.news.
- Share weekly-vue.news on social media and help me spread the word.
- Buy me a coffee ☺️
Have a great week ☀️
Vue Tip: Use Provide & Inject to Avoid Prop Drilling
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 provide and inject :
The principle is simple:
- In the parent component, we declare the variables (props, data, computed, …), which will be accessible to all descendants via the provide key.
- From any child component, we specify the list of injectable variables via the inject key
Provide
- To provide data to a component’s descendants, we use the
provide()function:
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.
Inject
To inject data provided by an ancestor component, we use the inject() function:
For more details, check the official docs.
Curated Vue Content
📕 Nuxt 3 Client-Side Error Handling
👉🏻 Michael explains the NuxtErrorBoundary component that comes with Nuxt 3.
👉🏻 It makes handling client-side errors a breeze.
📕 Comment Threads with Recursive Components in Vue 3
👉🏻 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.
TypeScript Tip: Make every property of a certain type required
Required<Type> constructs a type consisting of all properties of Type set to required:
It’s the opposite of Partial.
Quote of the Week
Curated Web Development Content
📕 Clean Code in TypeScript
👉🏻 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…
📕 Using TypeScript with Node.js
👉🏻 This tutorial is part 2 of 3 of a series.
👉🏻 It shows how to we migrating a Node.js project to TypeScript.
📕 The Evolution Of Scalable CSS
👉🏻 “In this post, we’ll develop a deeper understanding of CSS by diving into the underlying issues that make it difficult to scale.”
📕 No architecture is better than bad architecture
👉🏻 Building a solid architecture can be a waste of energy and can stop teams from working fast.
📕 The HTTP crash course nobody asked for
👉🏻 “The inner workings of HTTP/2 were intimidating and mysterious before I wrote this article, and now they feel somewhat approachable.”
🛠️ HyperUI
👉🏻 A collection of free Tailwind CSS components that can be used in your next project.
🛠️ TypeRunner
👉🏻 A TypeScript compiler that can do type checking up to 1000x faster and claims to “bring TypeScript to the next level.”
🛠️ Barrelsby
👉🏻 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.
😂 Password Purgatory
👉🏻 “an intentionally infuriating API to request inane and ultimately unachievable password criteria intended to deliberately frustrate the user.”
