Клиентский файл компонента в Nuxt

Обёртка ClientOnly прячет от сервера только выбранный фрагмент чужого шаблона. Иногда удобнее пометить весь файл компонента как клиентский: тогда его не рендерят на сервере вообще.

Для этого к имени файла перед расширением добавляют суффикс .client. Компонент WindowSize.client.vue может свободно читать window в скрипте:

<script setup>
	const width = ref(window.innerWidth);
</script>
<template>
	<p>
		Screen width: {{ width }} px
	</p>
</template>

На странице подключаем его обычным тегом WindowSize - суффикс .client в имени файла на тег не влияет:

<template>
	<WindowSize />
</template>

Такой файл отличается от ClientOnly: там вы решаете, какой кусок шаблона скрыть от SSR, а здесь весь компонент живёт только на клиенте.

Создайте клиентский компонент, который показывает ширину экрана, и выведите его на странице.