Запись куки в Nuxt

Функция useCookie не только читает куку: присвоение в .value отправляет обновление в браузер и синхронизирует его с серверным рендером. Достаточно изменить ref так же, как обычную реактивную переменную.

Добавим кнопку, которая сохраняет тёмную тему, и покажем текущее значение рядом:

<script setup>
	const theme = useCookie('theme');
	
	function setDark() {
		theme.value = 'dark';
	}
</script>
<template>
	<p>
		Theme: {{ theme }}
	</p>
	<button type="button" @click="setDark">
		Use dark theme
	</button>
</template>

После нажатия кука theme получит строку dark. Абзац с подписью Theme: обновится сразу, а при перезагрузке страницы значение подтянется из сохранённой куки.

Сделайте кнопку, которая записывает в куку worker имя Alex и выводит текущее значение этой куки на странице.

Добавьте вторую кнопку с другим имем работника и убедитесь, что после нажатия на экране и в куке остаётся последнее выбранное имя.