Javascript is required

High-quality Vue tips and curated content every week

Join 550+ other Vue developers and get Vue tips & news straight to your inbox, every week.
This weekly Vue newsletter gives you high-quality tips and curated content to help you become a Vue.js expert. Additionally, it provides content about web development topics like TypeScript, JavaScript, HTML5, and CSS3. Published each Monday since June 2021.
Free eBook: Bring your Vue skills to the next level!
Free ebookfor newsletter subscribers
I look forward to receiving it each Monday.I always pick up a few new pieces of information that help me in my daily job.Thank you!Dave F.

Here's the latest issue

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 (TwitterLinkedInInstagram).

I put a lot of effort into this weekly newsletter, and you can support my work in the following ways:

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:

Image created with CodeSnap.dev

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:

Image created with CodeSnap.dev

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:

Image created with CodeSnap.dev

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."

Not convinced yet? Read some more issues!
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue.
Β© 2022 mokkapps.de. All rights reserved.Created with β™₯ by Mokkapps