VueCraft NPM

Nuxt и SSR ​

vue-i18n-kit безопасен для SSR. Состояние плагина хранится для каждого инстанса приложения Vue через provide/inject, а не как синглтон на уровне модуля, поэтому параллельные SSR-запросы не могут заражать друг друга.

Вызовы localStorage (используемые persistLocale) на сервере молча ничего не делают — try/catch обрабатывает отсутствие глобального объекта.

Настройка Nuxt ​

ts
// plugins/i18n.ts
import { defineNuxtPlugin } from '#app'
import { createVueI18nPlugin } from 'vue-i18n-kit'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(
    createVueI18nPlugin({
      defaultLocale: 'en',
      fallbackLocale: 'en',
      locales: {
        en: {
          messages: () => import('~/locales/en.json'),
          meta: { display: 'English', flag: '🇬🇧' },
        },
        ru: {
          messages: () => import('~/locales/ru.json'),
          meta: { display: 'Русский', flag: '🇷🇺' },
        },
      },
    }),
  )
})

Определение локали на стороне сервера ​

Чтобы выбрать локаль на основе заголовка Accept-Language:

ts
// plugins/i18n.ts
import { defineNuxtPlugin, useRequestHeaders } from '#app'
import { createVueI18nPlugin } from 'vue-i18n-kit'

const SUPPORTED = ['en', 'ru']

export default defineNuxtPlugin((nuxtApp) => {
  const headers = useRequestHeaders(['accept-language'])
  const accepted = headers['accept-language'] ?? ''
  const detected = SUPPORTED.find((code) => accepted.toLowerCase().includes(code))

  nuxtApp.vueApp.use(
    createVueI18nPlugin({
      defaultLocale: detected ?? 'en',
      fallbackLocale: 'en',
      locales: {
        en: () => import('~/locales/en.json'),
        ru: () => import('~/locales/ru.json'),
      },
    }),
  )
})

Заметки ​

  • persistLocale — работает только на клиенте; на сервере молча игнорируется.
  • Гидратация — сервер и клиент рендерят с одинаковой defaultLocale. Если вы используете persistLocale, клиент восстановит сохранённую локаль пользователя после гидратации.
  • Vite-плагин и CLI — работают так же в проектах Nuxt. Добавьте vueI18nMapPlugin в nuxt.config.ts под vite.plugins.
  • plugin.service в Nuxt — создавайте плагин внутри defineNuxtPlugin (не на уровне модуля), чтобы каждый SSR-запрос получал свой собственный инстанс service.