<ClientOnly>

Исходники
Отрисовка компонентов только на клиенте с помощью компонента ClientOnly.

Компонент ClientOnly используется с целью рендеринга компонента только на клиенте.

Содержимое слота по умолчанию будет удалено из сборки сервера. (Это означает, что любой CSS, используемый компонентами внутри него, может не быть встроен при рендеринге исходного HTML.)

Входные параметры

  • placeholderTag | fallbackTag: укажите тег, который будет отображаться на сервере.
  • placeholder | fallback: укажите контент, который будет отображаться на сервере.
<template>
  <div>
    <Sidebar />
    <!-- Компонент <Comment> будет отображаться только на клиенте -->
    <ClientOnly fallback-tag="span" fallback="Загрузка комментариев...">
      <Comment />
    </ClientOnly>
  </div>
</template>

Слоты

  • #fallback: укажите контент, который будет отображаться на сервере и отображаться до тех пор, пока в браузере не будет установлено ClientOnly.
pages/example.vue
<template>
  <div>
    <Sidebar />
    <!-- Это отображает элемент «span» на сервере -->
    <ClientOnly fallbackTag="span">
      <!-- этот компонент будет отображаться только на клиенте -->
      <Comments />
      <template #fallback>
        <!-- это будет отображаться на сервере -->
        <p>Загрузка комментариев...</p>
      </template>
    </ClientOnly>
  </div>
</template>

Examples

Accessing HTML Elements

Components inside <ClientOnly> are rendered only after being mounted. To access the rendered elements in the DOM, you can watch a template ref:

pages/example.vue
<script setup lang="ts">
const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')

// The watch will be triggered when the component is available
watch(nuxtWelcomeRef, () => {
 console.log('<NuxtWelcome /> mounted')
}, { once: true })
</script>

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