El componente <ClientOnly> se utiliza para renderizar intencionadamente un componente solo en el lado del cliente.

Props

• placeholderTag | fallbackTag: especifica una etiqueta para ser renderizada en el lado del servidor.
• placeholder | fallback: especifica un contenido para ser renderizado en el lado del servidor.

<template>
  <div>
    <Sidebar />
    <!-- El componente <Comment> solo se renderizará en el lado del cliente -->
    <ClientOnly fallback-tag="span" fallback="Cargando comentarios...">
      <Comment />
    </ClientOnly>
  </div>
</template>

Slots

• #fallback: especifica un contenido para ser renderizado en el servidor y mostrado hasta que <ClientOnly> se monte en el navegador.

<template>
  <div>
    <Sidebar />
    <!-- Esto renderiza el elemento "span" en el lado del servidor -->
    <ClientOnly fallbackTag="span">
      <!-- este componente solo se renderizará en el lado del cliente -->
      <Comments />
      <template #fallback>
        <!-- esto se renderizará en el lado del servidor -->
        <p>Cargando comentarios...</p>
      </template>
    </ClientOnly>
  </div>
</template>

Ejemplos

Accediendo a Elementos HTML

Los componentes dentro de <ClientOnly> se renderizan solo después de ser montados. Para acceder a los elementos renderizados en el DOM, puedes observar una referencia de plantilla:

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

// La observación se activará cuando el componente esté disponible
watch(nuxtWelcomeRef, () => {
 console.log('<NuxtWelcome /> montado')
}, { once: true })
</script>

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