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