---
title: "Pause DOM Rendering"
description: "Pause Unhead DOM updates during route transitions. Use dom:beforeRender hook with Vue Suspense for smoother page loads."
canonical_url: "https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering"
last_updated: "2026-06-30T06:59:55.825Z"
---

Pausing the DOM rendering is useful for when you want to ensure your page is fully loaded before updating tags.

In Vue, this is especially useful when you're using `<Suspense>`.

<code-group>

```ts [Universal]
import { createHead, renderDOMHead } 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
  renderDOMHead(head)
})
```

```ts [Vue]
import { createHead } from '@unhead/vue'
import { renderDOMHead } from 'unhead/client'
import { useRouter } from 'vue-router'

const head = createHead()

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

// start pausing DOM updates when route changes (trigger immediately)
useRouter().beforeEach(() => {
  pauseDOMUpdates = true
})
// watch for new route before unpausing dom updates (triggered after suspense resolved)
useRouter().afterEach(() => {
  // only if we have paused (clicking on a link to the current route triggers this)
  if (pauseDOMUpdates) {
    pauseDOMUpdates = false
    renderDOMHead(head)
  }
})
```

</code-group>