onPrehydrate

Use onPrehydrate para executar um callback no cliente imediatamente antes do Nuxt hidratar a página.

Este composable está disponível no Nuxt v3.12+.

onPrehydrate é um hook de ciclo de vida composable que permite executar um callback no cliente imediatamente antes do Nuxt hidratar a página.

Esta é uma utilidade avançada e deve ser usada com cuidado. Por exemplo, nuxt-time e @nuxtjs/color-mode manipulam o DOM para evitar discrepâncias de hidratação.

Uso

Chame onPrehydrate na função setup de um componente Vue (por exemplo, em <script setup>) ou em um plugin. Ele só tem efeito quando chamado no servidor e não será incluído na sua build do cliente.

Tipo

Signature

export function onPrehydrate(callback: (el: HTMLElement) => void): void
export function onPrehydrate(callback: string | ((el: HTMLElement) => void), key?: string): undefined | string

Parâmetros

Parâmetro	Tipo	Obrigatório	Descrição
`callback`	`((el: HTMLElement) => void) \| string`	Sim	Uma função (ou função em formato de string) para executar antes do Nuxt hidratar. Será convertida em string e embutida no HTML. Não deve ter dependências externas ou referenciar variáveis fora do callback. Executa antes da inicialização do runtime do Nuxt, portanto, não deve depender do contexto do Nuxt ou Vue.
`key`	`string`	Não	(Avançado) Uma chave única para identificar o script de pré-hidratação, útil para cenários avançados como múltiplos nós raiz.

Valores de Retorno

Retorna undefined quando chamado apenas com uma função de callback.
Retorna uma string (o id de pré-hidratação) quando chamado com um callback e uma chave, que pode ser usada para definir ou acessar o atributo data-prehydrate-id para casos de uso avançados.

Exemplo

app.vue

<script setup lang="ts">
declare const window: Window
// ---cut---
// Execute o código antes do Nuxt hidratar
onPrehydrate(() => {
  console.log(window)
})

// Acesse o elemento raiz
onPrehydrate((el) => {
  console.log(el.outerHTML)
  // <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> Hi there </div>
})

// Avançado: acesse/defina `data-prehydrate-id` você mesmo
const prehydrateId = onPrehydrate((el) => {})
</script>

<template>
  <div>
    Hi there
  </div>
</template>

※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.

A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/api/composables/on-prehydrate