Don't miss the next edition. Subscribe to the newsletter.
Published at Sep 23, 2024, 3:00 PMRegistering Cleanup Callbacks in Watchers Ready for your weekly Vue & Nuxt dose? Weekly Vue News #164 Registering Cleanup Callbacks in Watchers View online Hi 👋 Nuxt Nation 2024 got announced last week. It's a free 2-day virtual conference from 12-13 November. Learn everything Nuxt has to offer in 2024 🤩. Have a lovely week ☀️ Vue 📕 10 Practical Tips for Better Vue Apps* 👉🏻 1. Use the Composition API and script setup for Cleaner Component Code 👉🏻 2. Leverage defineProps and defineEmits for Type-Safe Props and Emits 👉🏻 and more... 📕 Dynamic Layouts with Vue jsx: A Guide to Flexible and Maintainable UIs 👉🏻 Vue JSX allows developers to write Vue components using a syntax similar to React’s JSX, offering greater flexibility and expressiveness. 📕 Implement feature flags in Vue 3 using GrowthBook 👉🏻 This article demonstrates how feature flags can be used to remotely toggle on/off the flash sale section of a web app written in Vue 3. 📹 Is Vue the fastest when it comes to SSR? 👉🏻 The "SSR showdown" benchmark was heavily discussed in the past weeks. 👉🏻 In this video, Alex takes look at the first and the final iteration of the benchmark, issues and results. 🛠️ PrimeBlocks 👉🏻 Introducing 480 Vue Components crafted with PrimeVue and Tailwind. 👉🏻 Components are copy-paste ready, meaning you can grab the source code and add to your project. Sponsored JavaScript DataGrid with Advanced Spreadsheet Controls Deliver Spreadsheet Experiences to your Applications Over 400 implemented excel-like formulas. A feature-rich data grid component that includes functions like cross worksheets, filtering, export and import from xlsx, data binding, and more 💡 Vue Tip: Registering Cleanup Callbacks in Watchers When you register a cleanup callback in a watcher, you can ensure that the cleanup logic is executed when the watcher is destroyed. This is especially useful when you need to clean up resources like event listeners or network requests. Let's take a look at the following watcher which performs a network request: 1 < script setup > 2 watch ( id , ( newId ) => { 3 fetch ( ` /api/ ${ newId }` ). then (() => { 4 // callback logic 5 }) 6 }) 7 </ script > But this code has a problem: If id id changes before the request completes, the callback logic executes with the stale ID. To fix this, you can use the onWatcherCleanup onWatcherCleanup function to abort the stale request: 1 < script setup > 2 import { watch , onWatcherCleanup } from ' vue ' 3 4 watch ( id , ( newId ) => { 5 const controller = new AbortController () 6 7 fetch ( ` /api/ ${ newId }` , { signal : controller . signal }). then (() => { 8 // callback logic 9 }) 10 11 onWatcherCleanup (() => { 12 // abort stale request 13 controller . abort () 14 }) 15 }) 16 </ script > onWatcherCleanup onWatcherCleanup is only available in Vue 3.5 and must be called during the synchronous execution of a watchEffect watchEffect effect function or watch watch callback function: you cannot call it after an await await statement in an async function. Nuxt 📕 Exploring Server Components in Nuxt* 👉🏻 Learn how to enhance your Nuxt apps by using server components for selective server-side rendering, without sacrificing client-side interactivity. 📕 Behind the scenes of Nuxt Studio's visual editor 👉🏻 Discover the inner workings of Nuxt Studio's visual editor and how it interprets the Markdown syntax and generates it back. 📕 Nuxt Going Full-Stack: How to Validate Forms? 👉🏻 In this article, the author managed to validate forms on both the client and server sides without duplicating the validation logic, from simple text fields to complex file uploads with NuxtHub. 📹 Nuxt Build or Nuxt Generate? 👉🏻 When you build your Nuxt application for production, you can use nuxt build nuxt build or nuxt generate nuxt generate . 👉🏻 Alex explains what the difference between both are and when to use which one. 🛠️ Elk 👉🏻 An open source Twitter-clone for Mastodon made with Nuxt. 📅 Events vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) Nuxt Nation (12 - 13 November 2024, Virtual Conference) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻💻 In Other News 📕 Common Causes of Memory Leaks in JavaScript 👉🏻 Learn how to identify and fix common JavaScript memory leaks in Node.js and Deno.js 📕 How To Create An NPM Package 👉🏻 Sounds simple, but there are a lot of steps involved if you want to follow best practices, introduce useful tools, and get things just right. 🛠️ Web Design Museum 👉🏻 Thousands of screens and videos of old websites, mobile apps, and software from the 1990s to mid-00s. 🛠️ CodeViz 👉🏻 A VSCode extension for visualizing and navigating through your codebase's architecture and functions. 😂 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 X thread 📨 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 from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany {{ TrackView }}