Чтение куки в Nuxt

Чтобы показать на странице то, что браузер уже запомнил, подключим функцию useCookie. Она вернёт ref с текущим значением куки или с null, если куки с таким именем ещё нет.

Давайте разберём страницу с темой оформления. Сохраним ссылку на куку theme и выведем её в шаблоне:

<script setup>
	const theme = useCookie('theme');
</script>
<template>
	<p>
		Theme: {{ theme }}
	</p>
</template>

Пока пользователь ни разу не выбирал тему, в разметке появится null или пустой вывод. После того как кука появится в браузере, тот же код покажет сохранённую строку и при первом заходе на сервере, и после обновления вкладки.

Сделайте страницу, которая читает куку city и показывает её значение в абзаце с подписью City:.

Проверьте страницу без куки city в браузере и после ручной установки этой куки в инструментах разработчика: на экране должно отличаться то, что выводится в абзаце.