Публичная настройка в Nuxt

Адрес API часто один для многих страниц, но меняется между средой разработки и продакшеном. Дублировать длинный URL в каждом файле неудобно. В Nuxt для таких значений служит runtimeConfig: часть полей доступна только на сервере, а часть специально публикуется для браузера.

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

Зададим apiBase в nuxt.config.ts:

export default defineNuxtConfig({
	runtimeConfig: {
		public: {
			apiBase: '',
		},
	},
});

Значение для разработки удобно держать в .env в корне проекта:

NUXT_PUBLIC_API_BASE=https://jsonplaceholder.typicode.com

Префикс NUXT_PUBLIC_ связывает переменную окружения с полем runtimeConfig.public. На странице магазина прочитаем базу через useRuntimeConfig и соберём URL для функции useFetch. После правки .env перезапустим npm run dev:

<script setup>
	const config = useRuntimeConfig();
	
	const { data } = await useFetch(
		() =>
			config.public.apiBase + '/users',
	);
</script>
<template>
	<ul>
		<li
			v-for="user in data"
			:key="user.id"
		>
			{{ user.name }}
		</li>
	</ul>
</template>

Перенесите адрес API страницы магазина в публичную настройку и соберите URL запроса из неё.

Смените базовый адрес в .env и убедитесь, что список на /shop всё ещё загружается.