Общий код в Nuxt

Утилиты в app/utils удобны для страниц, а server/utils - для обработчиков. Если одна и та же формула нужна и в Vue, и в Nitro, дублировать файл не стоит. В корне проекта Nuxt 4 предлагает каталог shared: модули оттуда импортируют явно через алиас #shared, чтобы было видно общий источник.

Давайте изучим функцию форматирования денег и два места вызова. Автоимпорт для shared тоже возможен в настройках, но явный import нагляднее показывает, что код общий.

Структура проекта:

/shared/
- /utils/
  - money.js
/app/
- /pages/
  - shop.vue
/server/
- /routes/
  - price.js

Модуль с экспортом функции:

export function formatMoney(amount) {
	return `$${amount}`;
}

Страница магазина подключит функцию и выведет цену в шаблоне:

<script setup>
	import { formatMoney } from '#shared/utils/money';
	
	const priceLabel = formatMoney(24);
</script>
<template>
	<h1>
		Shop
	</h1>
	<p>
		Price: {{ priceLabel }}
	</p>
</template>

Серверный маршрут импортирует тот же модуль и вернёт $24 на /price, как на странице /shop в подписи Price:

import { formatMoney } from '#shared/utils/money';

export default defineEventHandler(() => {
	return formatMoney(24);
});

Сделайте в shared функцию, которая склеивает имя и фамилию в одну строку «First Last» на английском.

Выведите результат на странице и верните его же из отдельного серверного маршрута, импортируя функцию из #shared в обоих файлах.