Weekly Vue News #182

Use effectScope for Managing and Cleaning Up Reactive Effects

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  3const scope = effectScope()  4  5scope.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  14scope.stop()  15

A practical application is the createSharedComposable createSharedComposable function in VueUse:

1import type { EffectScope } from 'vue'  2import type { AnyFn } from '../utils'  3import { effectScope } from 'vue'  4import { tryOnScopeDispose } from '../tryOnScopeDispose'  5  6/**  7 * Make a composable function usable with multiple Vue instances.  8 *  9 * @see https://vueuse.org/createSharedComposable  10 */  11export 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:

1function 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  19const 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.