<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 fallback-tag="span">
      <!-- этот компонент будет отображаться только на клиенте -->
      <Comments />
      <template #fallback>
        <!-- это будет отображаться на сервере -->
        <p>Загрузка комментариев...</p>
      </template>
    </ClientOnly>
  </div>
</template>

Примеры

Доступ к DOM-элементам

Компоненты внутри <ClientOnly> рендерятся только после монтирования. Чтобы обратиться к отрисованным элементам в DOM, используйте ссылку на элемент шаблона (ref в шаблоне и useTemplateRef в <script setup>):

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

// watch сработает, когда компонент станет доступен
watch(nuxtWelcomeRef, () => {
  console.log('смонтирован <NuxtWelcome />')
}, { once: true })
</script>

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