Weekly Vue News #164

Registering Cleanup Callbacks in Watchers

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.

💡 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>  2watch(id, (newId) => {  3  fetch(`/api/${newId}`).then(() => {  4    // callback logic  5  })  6})  7</script>

But this code has a problem: If idid changes before the request completes, the callback logic executes with the stale ID. To fix this, you can use the onWatcherCleanuponWatcherCleanup function to abort the stale request:

1<script setup>  2import { watch, onWatcherCleanup } from 'vue'  3  4watch(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>

onWatcherCleanuponWatcherCleanup is only available in Vue 3.5 and must be called during the synchronous execution of a watchEffectwatchEffect effect function or watchwatch callback function: you cannot call it after an awaitawait 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 buildnuxt build or nuxt generatenuxt 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.