---
title: "Pause DOM Rendering"
description: "Pause Unhead DOM updates during route transitions with the dom:beforeRender hook, then render the queued changes."
canonical_url: "https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering"
last_updated: "2026-08-11T00:46:06.499Z"
---

Set `context.shouldRender` in `dom:beforeRender` to hold head updates until a route or `<Suspense>` boundary is ready. Call `head.render()` after releasing the pause.

<code-group>

```ts [Universal]
import { createHead } from 'unhead/client'

const head = createHead()

let pauseDOMUpdates = true
head.hooks.hook('dom:beforeRender', (context) => {
  context.shouldRender = !pauseDOMUpdates
})

// When your app is ready
loadPage().then(() => {
  pauseDOMUpdates = false
  // triggers the dom update
  head.render()
})
```

```ts [Vue]
import { injectHead } from '@unhead/vue'
import { onScopeDispose } from 'vue'
import { useRouter } from 'vue-router'

export function usePausedHeadUpdates() {
  // Call this composable during component setup so both injections are active.
  const head = injectHead()
  const router = useRouter()

  let pauseDOMUpdates = true
  const removeHook = head.hooks.hook('dom:beforeRender', (context) => {
    context.shouldRender = !pauseDOMUpdates
  })

  // Start pausing DOM updates when a route changes (trigger immediately).
  const removeBeforeEach = router.beforeEach(() => {
    pauseDOMUpdates = true
  })
  // Resume after the new route and its Suspense boundary have resolved.
  const removeAfterEach = router.afterEach(() => {
    if (pauseDOMUpdates) {
      pauseDOMUpdates = false
      head.render()
    }
  })

  onScopeDispose(() => {
    removeHook()
    removeBeforeEach()
    removeAfterEach()
  })
}
```

</code-group>