Плагин для клиента в Nuxt

Не весь код плагина безопасно или возможно запускать на сервере. Объект window существует только в браузере. Если обратиться к нему в обычном файле app/plugins, рендер на сервере может завершиться ошибкой.

Давайте изучим клиентский плагин. Суффикс .client в имени файла говорит Nuxt: этот модуль подключать и выполнять только на клиенте. На сервере файл даже не загружается, поэтому обращение к window внутри него допустимо.

Пример window-size.client.js отдаёт ширину окна через provide:

export default defineNuxtPlugin(() => {
	return {
		provide: {
			windowWidth: () => window.innerWidth,
		},
	};
});

На странице ширину читают так же, как другие поля из плагинов - через функцию useNuxtApp и имя с префиксом $:

<script setup>
	const { $windowWidth } = useNuxtApp();
</script>
<template>
	<p>
		Width: {{ $windowWidth() }}
	</p>
</template>

При первом заходе HTML с сервера может прийти без числа ширины, потому что клиентский плагин ещё не работал. После гидратации в браузере плагин выполнится, и значение появится на экране. Именно поэтому важен суффикс .client: сервер никогда не исполняет этот файл и не пытается прочитать window.

Создайте клиентский плагин, который через provide отдаёт язык браузера, и выведите его на странице.

Создайте клиентский плагин online.client.js, который сообщает через provide, есть ли у пользователя сеть, и покажите статус текстом Online или Offline.