Введение в куки в Nuxt

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

Куки привычны для веб-приложений: сервер может положить их в ответ, а браузер хранит пару имя-значение и подставляет её, когда пользователь снова открывает страницы того же сайта. Для Nuxt это удобный способ передать предпочтение между перезагрузкой вкладки и переходами по роутам внутри одного проекта.

На страницах и в компонентах для работы с куками есть функция useCookie. Она возвращает ref: чтение и запись через .value читают и меняют куку с этим именем. Тот же вызов работает при рендере на сервере и после гидратации в браузере, поэтому первый HTML уже может опираться на сохранённое значение, а не ждать только клиентского кода.

Имя куки в примере - строка вроде theme. Вызов функциюа с таким именем возвращает ref: в шаблоне и в script setup достаточно читать и писать .value, чтобы браузер получил обновлённую куку в ответе страницы. Пока ref не трогают, используется то, что уже лежит в хранилище клиента или пришло в заголовке запроса при SSR.

Такой подход удобен для переключателей и простых настроек: одна строка в куке, одна реактивная переменная на странице, без отдельного запроса только ради флага. Значение переживает обновление вкладки и может участвовать в первом серверном рендере так же, как локальные данные компонента.