Компонент только для клиента в Nuxt

При SSR шаблон страницы сначала строится на сервере. Там нет объекта window и других API браузера. Если обратиться к ним прямо в шаблоне, сборка или отрисовка на сервере может завершиться ошибкой.

Компонент ClientOnly оборачивает фрагмент шаблона, который нужно показать только после загрузки страницы в браузере. На сервере содержимое слота не рендерится, поэтому внутри можно безопасно использовать значения вроде ширины окна.

На главной странице выведем ширину окна в абзаце внутри ClientOnly. Значение возьмём из window.innerWidth только когда код выполняется на клиенте:

<script setup>
	const width = ref(0);
	
	if (import.meta.client) {
		width.value = window.innerWidth;
	}
</script>
<template>
	<ClientOnly>
		<p>
			Window width: {{ width }} px
		</p>
	</ClientOnly>
</template>

Проверка import.meta.client не даёт обратиться к window на сервере при выполнении скрипта. Сам абзац дополнительно защищает ClientOnly: на сервере этот кусок разметки не попадает в HTML ответа.

Выведите язык браузера пользователя внутри ClientOnly на странице.