A single-page app is one JavaScript context that lives as long as the tab, and route changes mount and unmount components underneath it hundreds of times in a working session. Every leak on this page has the same shape: something that outlives the component — the window, the router, the nuxtApp, a module-scope variable — is still holding a reference to it, so the component, its reactive effects and usually a chunk of detached DOM can never be collected. Internal tools are where this hurts, because nobody reloads a dashboard they keep open all day.

The catalogue

How it works

1, 2, 3 — listeners, timers, observers

All three are the same bug and have the same shape of fix. The manual version is fine as long as the teardown is symmetric; the reason to prefer VueUse in a layer is that the composable registers its own cleanup on the active scope, so a consumer cannot forget.

<script setup lang="ts">
const compact = ref(false)

onMounted(() => {
  // three owners that outlive this component, zero teardown
  window.addEventListener('scroll', () => { compact.value = window.scrollY > 64 })
  setInterval(() => refreshBadge(), 5_000)
  new ResizeObserver(measure).observe(document.body)
})
</script>

<script setup lang="ts">
const compact = ref(false)

// each of these registers cleanup on the current scope and stops on unmount
useEventListener(window, 'scroll', () => { compact.value = window.scrollY > 64 })
useIntervalFn(() => refreshBadge(), 5_000)
useResizeObserver(document.body, measure)
</script>

Without VueUse, one AbortController retires any number of listeners at once:

export function useHotkeys(handler: (e: KeyboardEvent) => void) {
  const controller = new AbortController()
  const { signal } = controller

  if (import.meta.client) {
    window.addEventListener('keydown', handler, { signal })
    window.addEventListener('blur', reset, { signal })
  }

  // works in a component AND in any effectScope — nothing is component-specific
  onScopeDispose(() => controller.abort())
}

4 — third-party instances and detached DOM

This is the biggest leak by bytes: a chart or map instance holds its canvas, its data arrays and a whole detached DOM subtree, and Vue's reactive proxy over it makes the retainer chain even harder to read in a snapshot.

<script setup lang="ts">
const el = ref<HTMLElement>()
// ⚠ deep-reactive proxy over a library instance, and never destroyed
const chart = ref<Chart | null>(null)

onMounted(() => {
  chart.value = new Chart(el.value!, { data: props.data })
})
</script>

<template><div ref="el" /></template>

<script setup lang="ts">
import { markRaw, shallowRef } from 'vue'

const el = useTemplateRef<HTMLElement>('el')
// shallowRef + markRaw: Vue stores the instance, it never proxies its internals
const chart = shallowRef<Chart | null>(null)

onMounted(() => {
  chart.value = markRaw(new Chart(el.value!, { data: props.data }))
})

onBeforeUnmount(() => {
  chart.value?.destroy()   // releases canvas, listeners and the detached subtree
  chart.value = null
})
</script>

<template><div ref="el" /></template>

markRaw is not itself the leak fix — destroy() is. It matters because a reactive proxy of a library instance makes every internal object reachable through Vue's dependency graph, costs measurable CPU on every access, and turns the snapshot's Retainers view into noise.

5 — effects created outside a scope

watch, watchEffect and computed register themselves on the active effect scope. Inside <script setup> that is the component's scope, and the compiler restores it across top-level await for you. Inside a router guard, a setTimeout callback, or a plain async setup() after its first await, there is no active scope: the effect is created, subscribes to whatever reactive source it touches, and nothing will ever stop it.

export default defineNuxtPlugin((nuxtApp) => {
  const router = useRouter()
  const user = useState<User | null>('auth:user')

  router.afterEach(() => {
    // a new watcher on every navigation, none of them owned by anything
    watch(user, u => track('user', u?.id))
  })
})

import { effectScope } from 'vue'

export default defineNuxtPlugin((nuxtApp) => {
  const user = useState<User | null>('auth:user')
  const scope = effectScope(true)

  // one watcher for the tab, created once, in a scope I can stop
  scope.run(() => watch(user, u => track('user', u?.id)))

  // the guard's remover is kept and called, so HMR does not stack guards
  const stopGuard = useRouter().afterEach(to => track('page', to.path))

  if (import.meta.hot) {
    import.meta.hot.dispose(() => { stopGuard(); scope.stop() })
  }
})

6, 7, 8 — state and caches that only grow

useState and Pinia live for the whole tab, so a store action that pushes into an array on every route visit is a leak with no listener involved. useAsyncData results live in nuxtApp.payload.data; Nuxt 4 ships experimental.purgeCachedData enabled by default, which drops a key's cached data once no component is using it any more — which is exactly what a custom getCachedData that always returns the previous value defeats. Where you own the lifecycle explicitly, clearNuxtData(keys) is the eviction call.

<script setup lang="ts">
const route = useRoute()
const key = computed(() => `report:${route.params.id}`)

const { data } = await useAsyncData(key.value, () => $fetch(`/api/reports/${route.params.id}`))

// this page's payload entry can be large; drop it when the user leaves
onScopeDispose(() => clearNuxtData(key.value))
</script>

And <KeepAlive> is an intentional leak with a bound — the bound is not optional:

<template>
  <NuxtLayout>
    <!-- without `max`, every page the user ever visits stays mounted in memory -->
    <NuxtPage :keepalive="{ max: 6, exclude: ['ReportDetail'] }" />
  </NuxtLayout>
</template>

Exercise

Be able to say