Don't miss the next edition. Subscribe to the newsletter.
Published at Jan 27, 2025, 3:00 PMUse effectScope for Managing and Cleaning Up Reactive Effects Ready for your weekly Vue & Nuxt dose? Weekly Vue News #182 Use effectScope for Managing and Cleaning Up Reactive Effects View online Hi 👋 This week is the Vue.js Nation Conference (January 29-30), and it's free to register — don't miss out! 🎉 On my end, I've migrated both mokkapps.de and weekly-vue.news to Nuxt Content v3 and Nuxt UI Pro v3. Next up, I'll be continuing work on my Nuxt Starter Kit. Lots of exciting things ahead — stay tuned! Enjoy this issue and have a lovely week ☀️ Vue 📕 13 Vue Composables Tips That Make Your Code Better 👉🏻 Vue composables are incredibly powerful, but they can quickly become messy and hard to maintain if you're not careful. 👉🏻 Michael Thiessen identified 13 tips that will help you write better, more maintainable composables. 📕 Understanding the Vue 3 Composition API 👉🏻 In this guide, Jakub breaks down the key concepts of the Composition API and show you how to use it effectively in your Vue 3 applications. 💡 Composable Design Patterns 👉🏻 Michael Thiessen has a new course where he shares 16 design patterns. 👉🏻 Learn the right techniques, principles, and patterns for crafting brilliant composables in Vue. 🛠️ alien-signals v1.0.0 👉🏻 Alien Signals are coming to Vue 3.6, basically a really fast way to handle signals. 🛠️ Vue Sprint Bottom Sheet 👉🏻 A lightweight, flexible solution for bottom sheets in Vue apps. 🛠️ Svar 👉🏻 A new suite of open source UI components for Svelte, React, and Vue. 💡 Vue Tip: Use effectScope for Managing and Cleaning Up Reactive Effects Vue provides the effectScope effectScope API to group and cleanup multiple reactive effects. An EffectScope EffectScope instance can automatically collect effects run within a synchronous function so that these effects can be disposed together at a later time. Let's take a look at a simple example: 1 // effect, computed, watch, watchEffect created inside the scope will be collected 2 3 const scope = effectScope () 4 5 scope . run (() => { 6 const doubled = computed (() => counter . value * 2 ) 7 8 watch ( doubled , () => console . log ( doubled . value )) 9 10 watchEffect (() => console . log ( ' Count: ' , doubled . value )) 11 }) 12 13 // Dispose of all effects in the scope 14 scope . stop () 15 A practical application is the createSharedComposable createSharedComposable function in VueUse: 1 import type { EffectScope } from ' vue ' 2 import type { AnyFn } from ' ../utils ' 3 import { effectScope } from ' vue ' 4 import { tryOnScopeDispose } from ' ../tryOnScopeDispose ' 5 6 /** 7 * Make a composable function usable with multiple Vue instances. 8 * 9 * @ see https://vueuse.org/createSharedComposable 10 */ 11 export function createSharedComposable Fn extends AnyFn >( composable : Fn ) : Fn { 12 let subscribers = 0 13 let state : ReturnType Fn > | undefined 14 let scope : EffectScope | undefined 15 16 const dispose = () => { 17 subscribers -= 1 18 if ( scope && subscribers 0 ) { 19 scope . stop () 20 state = undefined 21 scope = undefined 22 } 23 } 24 25 return Fn >(( ... args ) => { 26 subscribers += 1 27 if ( ! scope ) { 28 scope = effectScope ( true ) 29 state = scope . run (() => composable ( ... args )) 30 } 31 tryOnScopeDispose ( dispose ) 32 return state 33 }) 34 } This function creates a shared composable that efficiently manages side effects across multiple components. For example, using a useMouse useMouse hook, you can prevent multiple event listeners from being added: 1 function useMouse () { 2 const x = ref ( 0 ) 3 const y = ref ( 0 ) 4 5 function handler ( e ) { 6 x . value = e . x 7 y . value = e . y 8 } 9 10 window . addEventListener ( ' mousemove ' , handler ) 11 12 onUnmounted (() => { 13 window . removeEventListener ( ' mousemove ' , handler ) 14 }) 15 16 return { x , y } 17 } 18 19 const useSharedMouse = createSharedComposable ( useMouse ) effectScope effectScope allows developers to manage reactive effects more efficiently and clearly. By leveraging this powerful feature, you can ensure your applications are not only more performant but also easier to maintain. Nuxt 📕 Build a Nuxt app with Deno 👉🏻 In this tutorial, you'll build a simple Nuxt application with Deno that will display a list of dinosaurs and allow you to learn more about each one when you click on the name. 🛠️ Bedtime 👉🏻A Nuxt module for creating component stories, inspired by Histoire's excellent Story/Variant components. 👉🏻 This is work in progress, expect breaking changes ahead of versioned releases. 🎧 The Year in ReVue (with Daniel Roe) 👉🏻 Alexander Lichter is joined by Daniel Roe, full-time open source developer and lead of the Nuxt team to go through some notable events of 2024 in the Vue and Nuxt ecosystem. 📅 Events Vue.js Nation Conference (29 - 30 January 2025, free online conference) Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands) Vueconf.US (13 - 15 May 2025, Tampa, Florida) 💬 Quote of the week 🧑🏻💻 In Other News 📕 Accessibility essentials every front-end developer should know 👉🏻 Following accessibility best practices improves the user experience for everyone, not just those with disabilities. 📕 Epoch Semantic Versioning 👉🏻 A new versioning scheme that extends Semantic Versioning by adding an "Epoch" number to better communicate the significance of changes. 👉🏻 Addressing the limitations of zero-major versioning and the logarithmic human perception of version numbers. 📕 Tailwind CSS 4.0 👉🏻 Tailwind CSS v4.0 is a major release that focuses on performance improvements, with up to 5x faster full builds and over 100x faster incremental builds. 📕 Vitest 3.0 is out 👉🏻 The new major version includes only a few breaking changes. 👉🏻 It includes new features like reporter updates, inline workspaces, multi-browser configuration and more. 📹 MAXIMUM VS Code Productivity — Navigating Codebases Quickly 👉🏻 Wes Bos shares 15 techniques to navigate around faster in VS Code. 🎮 Stimulation Clicker 👉🏻 If you need a distraction and appreciate a really well-done browser experience, look no further. 😂 Fun 🔗 Want more Vue & Nuxt content? More Exclusive Vue Tips : Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Weekly Vue & Nuxt Videos : You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt. DejaVue Podcast : A weekly podcast about Vue.js and the ecosystem around it. Comments? Join the discussion about this issue in our Discord community . Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🦋 Repost the latest BlueSky post 📨 Reply to this email: feedback is welcome * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter. Unsubscribe Holzapfelkreuther Str. 19, 81375 Munich, Germany {{ TrackView }}