---
title: Pause DOM Rendering
description: 'Pause Unhead DOM updates during route transitions. Use dom:beforeRender hook with Vue Suspense for smoother page loads.'
---

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>`{lang="html"}.

::code-group

```ts [Universal]
import { renderDOMHead } from '@unhead/dom'
import { createHead } from 'unhead'

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 { renderDOMHead } from '@unhead/dom'
import { createHead } from '@unhead/vue'
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)
  }
})
```

::