<ClientOnly> · Компоненты Nuxt

Компонент 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>

Пользовательский useFetch в Nuxt

Как создать пользовательскую функцию для вызова внешнего API в Nuxt 3.

Рендеринг компонентов только во время разработки с помощью компонента DevOnly.