Кука в API в Nuxt

На Vue-странице куку удобно держать в функциюе useCookie: ref связан и с HTML, и с заголовками ответа. В файле server/api нет setup и шаблона, зато есть объект входящего запроса. Там куки читают функцией getCookie: первым аргументом передают event обработчика, вторым - имя куки из заголовка запроса браузера.

useCookie пишет и читает куку со стороны приложения Vue. getCookie только смотрит, что клиент уже прислал на сервер. Страница может установить куку, а API на том же хосте увидит то же имя в следующем запросе useFetch или $fetch.

Сначала зададим GET-обработчик, который возвращает тему из куки:

export default defineEventHandler((event) => {
	const theme = getCookie(event, 'theme');
	
	return { theme };
});

На странице /theme зададим куку, вызовем useFetch с путём /api/theme и выведем поле theme из JSON, чтобы убедиться, что обработчик прочитал то же значение:

<script setup>
	const theme = useCookie('theme');
	theme.value = 'dark';
	
	const { data } = await useFetch('/api/theme');
</script>
<template>
	<p>
		From API: {{ data.theme }}
	</p>
</template>

Сделайте API, которое возвращает куку department в объекте с полем department, и страницу, которая задаёт эту куку и выводит значение из ответа API.

Измените значение куки на странице, обновите вкладку и убедитесь, что текст из API совпадает с тем, что хранится в куке department.