Введение в интернационализацию в Nuxt

Один и тот же проект часто должны читать люди с разным родным языком. Интерфейс, подписи кнопок и заголовки тогда не зашивают одной строкой в шаблон, а берут из словарей: для английского одна таблица фраз, для другого языка - своя.

Язык обычно виден в адресе страницы. Пользователь понимает, в какой версии сайта он находится, а сервер и клиент подбирают нужный словарь по коду языка в URL. Переключение языка меняет и текст на экране, и префикс в пути, чтобы закладки и ссылки остались согласованными.

В экосистеме Nuxt эту задачу закрывает модуль @nuxtjs/i18n. Он регистрирует языки в конфиге, подгружает JSON-файлы переводов, даёт функциюы для текста и ссылок и согласует маршруты с выбранной локалью. Ручной роутер под каждый язык не нужен: достаточно описать список локалей и словари один раз.

Раздел опирается на Nuxt 4 и JavaScript. Страницы лежат в app/pages, настройки - в nuxt.config.ts без аннотаций типов. Файлы переводов удобно держать рядом с модулем в каталоге i18n/locales. Примеры можно повторить в проекте my-app после npm create nuxt@latest и запуска npm run dev.

Читатель уже знает Vue и Composition API; здесь не повторяют базовую вёрстку и реактивность. Уроки раздела идут от подключения модуля к готовому многоязычному поведению адреса и текста на экране. Приёмы можно переносить в рабочий проект по мере необходимости.

Цель раздела - один согласованный способ многоязычного сайта через официальный модуль, без дублирования страниц под каждый язык и без отдельного самописного роутера словарей. Когда настройка готова, добавление новой фразы сводится к ключу в JSON и вызову функции перевода в шаблоне или скрипте страницы.