O componente <ClientOnly> é usado para renderizar um componente intencionalmente apenas no lado do cliente.

Props

• placeholderTag | fallbackTag: especifica uma tag a ser renderizada no lado do servidor.
• placeholder | fallback: especifica um conteúdo a ser renderizado no lado do servidor.

<template>
  <div>
    <Sidebar />
    <!-- O componente <Comment> será renderizado apenas no lado do cliente -->
    <ClientOnly fallback-tag="span" fallback="Carregando comentários...">
      <Comment />
    </ClientOnly>
  </div>
</template>

Slots

• #fallback: especifica um conteúdo a ser renderizado no servidor e exibido até que <ClientOnly> seja montado no navegador.

<template>
  <div>
    <Sidebar />
    <!-- Isso renderiza o elemento "span" no lado do servidor -->
    <ClientOnly fallbackTag="span">
      <!-- este componente será renderizado apenas no lado do cliente -->
      <Comments />
      <template #fallback>
        <!-- isso será renderizado no lado do servidor -->
        <p>Carregando comentários...</p>
      </template>
    </ClientOnly>
  </div>
</template>

Exemplos

Acessando Elementos HTML

Componentes dentro de <ClientOnly> são renderizados apenas após serem montados. Para acessar os elementos renderizados no DOM, você pode observar uma referência de template:

<script setup lang="ts">
const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')

// O watch será acionado quando o componente estiver disponível
watch(nuxtWelcomeRef, () => {
 console.log('<NuxtWelcome /> montado')
}, { once: true })
</script>

<template>
  <ClientOnly>
    <NuxtWelcome ref="nuxtWelcomeRef" />
  </ClientOnly>
</template>