Настройка интерфейса в Nuxt

Заголовок приложения, подпись в шапке и другие значения вида не должны жить в секретах runtimeConfig. runtimeConfig в nuxt.config.ts предназначен для ключей окружения, токенов и серверных настроек. Публичные строки интерфейса, которые видит пользователь и которые можно менять вместе с кодом, хранят в app/app.config.ts.

Давайте зададим общий заголовок магазина. Файл экспортирует объект через defineAppConfig:

export default defineAppConfig({
	title: 'Shop',
});

Конфиг попадает в приложение при сборке и остаётся реактивным на клиенте. Изменение title отражается на всех страницах, где используется useAppConfig, без копирования строки в каждый файл. Дополнительные ключи в том же объекте описывают тему, пункты меню или тексты кнопок - всё, что относится к виду, а не к паролям API. Секреты и переменные из .env по-прежнему задают в runtimeConfig, а не здесь. На странице значения читают функцией useAppConfig и выводят поля в шаблоне:

<script setup>
	const appConfig = useAppConfig();
</script>
<template>
	<h1>
		{{ appConfig.title }}
	</h1>
</template>

Задайте в app.config.ts заголовок Employees Hub и выведите его на странице employees через useAppConfig.

Добавьте в app.config.ts поле departmentsLabel со значением Departments и покажите его на странице departments через useAppConfig.