Weekly Vue News #145

Mutate Your State Inside of the Provider Using Provide and Inject

Hi 👋

I have no interesting personal news to share, except that I am currently working on new content for upcoming newsletter issues. Enjoy this issue!

Have a nice week ☀️

Vue

📕 The Vue Ecosystem in 2024

👉🏻 Since its inception in February 2014, Vue has become one of the top JavaScript frameworks for building and maintaining web apps.

👉🏻 Ben Hong looks at some of the popular tools and libraries used by the community today.

📕 Use Hygen to Bootstrap New Components in your Custom Vue UI Library

👉🏻 Hygen is a code-generation tool.

👉🏻 It's useful for bootstrapping new components in a Vue.js Component Library.

🛠️ Unovis

👉🏻 Handles all sorts of things from Sankey diagrams to maps, graphs, chord diagrams, and traditional line/area charts.

👉🏻 Works with React, Angular, Svelte, Vue or plain old JS/TS.

🛠️ Icônes

👉🏻 An icon explorer with instant search for 100+ icon sets.

👉🏻 The app is powered by Iconify and built in Vue.

🔥 Vue Tip: Mutate Your State Inside of the Provider Using Provide and Inject

Provide / Inject is a powerful feature in Vue that allows you to pass data down to all of your child components without having to pass it down through props. This is especially useful when you have deeply nested components that need access to the same data.

When using reactive provide/inject values, it is recommended to keep any mutations to reactive state inside of the provider whenever possible.

Let's take a look at a simple Provider component:

1<script setup>  2import { provide, ref, readonly } from 'vue'  3  4const count = ref(0)  5  6const incrementCount = () => {  7  count.value++  8}  9  10provide('provide-data', {  11  count: readonly(count),  12  incrementCount  13})  14</script>

And this is an exemplary Child component that injects the data:

1<script setup>  2import { inject } from 'vue'  3  4const { count, incrementCount } = inject('provide-data')  5</script>  6  7<template>  8  <div>  9    <span>Count: {{ count }}</span>  10    <button @click="increment">Increment</button>  11  </div>  12</template>

The child component can access the count state as a read-only value and call the incrementCountincrementCount method to increment the count state. This allows you to encapsulate the logic for mutating the state inside of the provider component and provide a clean interface to the child components.

Read my article for more information.

Nuxt

📕 Why Nuxt makes your Vue life better

👉🏻 This article explores some key ways Nuxt makes your Vue life better.

📕 Domain Driven Design With Nuxt Layers

👉🏻 Combining the power of Nuxt layers and Nuxt modules you can come up with a robust and intuitive DDD system for your apps.

📹 Aliases in Nuxt 3

👉🏻 Relative paths are common when importing files (if you have to).

👉🏻 Nuxt gives us the option to create aliases for often used folders and even provides own ones.

🛠️ Nuxt Leaflet

👉🏻 A Nuxt 3 module to use Leaflet.

👉🏻It was made using Vue Leaflet which is a Vue 3 wrapper for Leaflet, that exposes the original Leaflet API as Vue components.

📅 Events

Vueconf US 2024 (22 - 24 May 2024, New Orleans, US)

PrageVue 2024 (17 September 2024, Prag, Czech Republic)

vuejs.de Conf (8 - 9 October 2024, Bonn, Germany)

VueConf Toronto (18 - 20 November 2024, Toronto, Canada)

💬 Quote of the week

🧑🏻‍💻 In Other News

📕 5 Tailwind CSS Anti-Patterns to Avoid

👉🏻 Here are some anti-patterns you should be wary of when working with Tailwind CSS.

📕 Figma's journey to TypeScript: Compiling away our custom programming language

👉🏻 Figma recently migrated its custom Skew programming language to TypeScript, a move made possible by improved browser support for WebAssembly and internal optimizations.

📕 Latency numbers every frontend developer should know

👉🏻 Frontend developers should know some basic latency numbers as web page load times and user action responsiveness online are often influenced by network latency.

📹 How to set up VSCode like a PRO!

👉🏻 Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss.

👉🏻 From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.

🛠️ imask.js

👉🏻 Prevent users from entering invalid values.

👉🏻 Has plugins for Vue, Angular, React, Svelte, and Solid, as needed.

🛠️ extension.js

👉🏻 An easy way to create cross-browser web extensions without any build configuration.

👉🏻 It's plug-and-play and has built-in support for TypeScript, WebAssembly, React, and modern JavaScript.