<ClientOnly>

Source
Рендер компонентов только на клиенте с помощью <ClientOnly>.

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

Содержимое слота по умолчанию исключается из серверной сборки (tree-shaking). CSS компонентов внутри может не попасть в инлайновые стили при первом рендере HTML.

Пропсы

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

Слоты

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

Примеры

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

Компоненты внутри <ClientOnly> рендерятся только после монтирования. Чтобы получить доступ к элементам в DOM, можно отслеживать template ref:

app/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>