Интеграция Nuxt 3

Мы рекомендуем использовать Nuxt I18n (@nuxtjs/i18n) для использования Vue I18n с Nuxt 3 с расширенными функциями, такими как локализованные маршруты, теги SEO и другие.

Создание собственной интеграции Nuxt 3

Ниже приведено руководство по настройке приложения Nuxt 3 с вашей собственной интеграцией путем добавления Vue I18n через Nuxt плагин.

УВЕДОМЛЕНИЕ

Это руководство по интеграции не поддерживает расширенные функции i18n (такие как маршрутизация и теги SEO) и предназначено только в демонстрационных целях. Рассмотрите возможность использования модуля Nuxt I18n, посмотрите его документацию на i18n.nuxtjs.org для получения дополнительной информации.

Требования

Требование Node.js для этого руководства такое же, как и для Nuxt 3.

Пожалуйста, проверьте здесь версию Node.js для Nuxt 3.

Примеры кода

Вы можете получить код для руководства ниже в examples/frameworks/nuxt3.

Вы также можете увидеть развернутое приложение, созданное в соответствии с этим руководством с помощью пользовательского действия GitHub для предоставления переводов из DeepL в проекте nuxt3-app-vue-i18n.

Настройка vue-i18n в приложении Nuxt 3

Теперь мы установим начальную среду для использования Vue I18n с Nuxt 3.

Создание приложения Nuxt 3

Запустите следующую команду для создания приложения Nuxt 3:

npx

npx nuxi init nuxt3-app-vue-i18n

pnpm

pnpm dlx nuxi init nuxt3-app-vue-i18n

После выполнения вышеуказанной команды созданный начальный проект Nuxt 3 будет иметь следующую структуру каталогов:

cd nuxt3-app-vue-i18n
tree -L 1
.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
└── tsconfig.json

Установка Vue I18n

Установите Vue I18n с помощью следующей команды:

npm

npm install vue-i18n -D

yarn

yarn add vue-i18n -D

pnpm

pnpm add -D vue-i18n

Настройка Nuxt плагина

Создайте каталог plugins следующим образом:

mkdir plugins

Далее создайте файл плагина Nuxt для настройки Vue I18n.

touch plugins/i18n.ts

После создания определите плагин следующим образом:

import { createI18n } from 'vue-i18n'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
      en: {
        hello: 'Hello, {name}!'
      }
    }
  })

  vueApp.use(i18n)
})

Конфигурация ресурсов локали для локализации приложения Nuxt 3 описана в следующем разделе

Запуск приложения Nuxt 3

Проверим, работает ли Vue I18n с Nuxt 3.

Мы отредактируем app.vue настроенного приложения Nuxt 3 следующим образом:

<template>
  <div>
    <NuxtWelcome /> // [!code --]
    <h1>{{ $t('hello', { name: 'vue-i18n' }) }}</h1> // [!code ++]
  </div>
</template>

Мы отредактировали и сохранили, запустите следующую команду для запуска приложения Nuxt 3 локально:

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

После запуска приложения на http://localhost:3000, мы увидим следующее:

Локализация вашего приложения Nuxt 3

До сих пор мы смогли интегрировать Vue I18n в наше приложение Nuxt 3. Давайте реализуем переключение языков и импорт ресурсов локали извне.

Реализуя переключение языков, мы эффективно делаем i18n нашего приложения Nuxt 3. 🌎 🌍 🌏

Кроме того, когда мы отделяем ресурсы локали от исходного кода (экстернализуем их), мы можем использовать отдельный рабочий процесс с помощью службы локализации для локализации приложения.

В следующих разделах мы включим поддержку английского, французского и японского языков в нашем приложении Nuxt 3.

Добавление переключения языков

Мы добавим функцию переключения языка в app.vue следующим образом:

<template>
  <div>
    <h1>{{ $t('hello', { name: 'vue-i18n' }) }}</h1>
    <form>
      <label for="locale-select">{{ $t('language') }}: </label> // [!code ++]
      <select
        id="locale-select"
        v-model="$i18n.locale"
      >
        <option value="en">
          en
        </option> // [!code ++]
        <option value="fr">
          fr
        </option> // [!code ++]
        <option value="ja">
          ja
        </option> // [!code ++]
      </select> // [!code ++]
    </form> // [!code ++]
  </div>
</template>

Переключение языков реализовано с использованием элемента select в form. Значение каждого параметра определяется как значение кода локали, которое будет объяснено позже в процессе экстернализации ресурсов локали.

Значение каждого параметра определяет значение кода локали, которое будет объяснено позже в процессе экстернализации ресурсов локали.

Экстернализация ресурсов локали

Мы определим ресурсы локали как внешние.

Существует несколько форматов файлов ресурсов, поддерживаемых Vue I18n, в данном случае мы выберем JSON.

Создадим нестандартный для "Nuxt-3" каталог с именем locales, выполнив:

mkdir locales

Теперь создадим JSON файлы для каждого из поддерживаемых нами языков:

touch locales/en.json # для английского
touch locales/fr.json # для французского
touch locales/ja.json # для японского

Заполним их следующим:

Для английского языка в locales/en.json:

{
  "hello": "Hello, {name}!",
  "language": "Language"
}

Для французского языка в locales/fr.json:

{
  "hello": "Bonjour, {name}!",
  "language": "Langue"
}

Для японского языка в locales/ja.json:

{
  "hello": "こんにちは、{name}！",
  "language": "言語"
}

Импорт ресурсов локали

Добавим "регистрацию" локалей в наш плагин (plugins/i18n.ts) следующим образом:

import { createI18n } from 'vue-i18n'
import en from '../locales/en.json'
import fr from '../locales/fr.json'
import ja from '../locales/ja.json'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
      en: { 
        hello: "Hello, {name}!"
      } 
      en, 
      fr, 
      ja 
    }
  })

  vueApp.use(i18n)
})

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

Запустим npm run dev (или yarn dev или pnpm dev) и перейдем к http://localhost:3000, чтобы проверить работоспособность изменений до сих пор.

Приложение Nuxt 3 теперь готово к базовой интернационализации! 🎉

Оптимизация с помощью @intlify/unplugin-vue-i18n

До сих пор вы могли использовать Vue I18n для поддержки переключения языков в приложении Nuxt 3. Кроме того, экстернализуя ресурсы локали, вы отделили их от исходного кода, что облегчает управление ресурсами локали и интеграцию со службой локализации.

Однако, как описано в Оптимизации, подготовленное до сих пор приложение Nuxt 3 имеет размер бандла, который можно улучшить.

Начиная с Vue I18n v9, компилятор сообщений позволяет предварительно компилировать ресурсы локали для повышения производительности, но пока не оптимизирован для этой производительности.

Вводим @intlify/unplugin-vue-i18n, плагин Vue I18n для оптимизации производительности.

Установка @intlify/unplugin-vue-i18n

npm

npm install @intlify/unplugin-vue-i18n -D

yarn

yarn add @intlify/unplugin-vue-i18n -D

pnpm

pnpm add -D @intlify/unplugin-vue-i18n

Конфигурация Nuxt config

Настройте nuxt.config.ts следующим образом:

import { defineNuxtConfig } from 'nuxt'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  build: { 
    transpile: ['vue-i18n'] 
  }, 
  vite: { 
    plugins: [ 
      VueI18nVitePlugin({ 
        include: [ 
          resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json') 
        ] 
      }) 
    ] 
  } 
})

Бандлер для Nuxt 3 по умолчанию - это vite. Поэтому здесь мы будем использовать опцию vite для оптимизации.

В vite.plugins настраивается плагин для @intlify/unplugin-vue-i18n. В качестве опции для этого плагина, опция include указывает ресурсы локали в формате json, расположенные в каталоге locales. Это позволяет @intlify/unplugin-vue-i18n предварительно компилировать ресурсы локали во время сборки, используя внутренне компилятор сообщений Vue I18n. Это улучшает производительность перевода в Vue I18n и, соответственно, производительность отображения приложений Nuxt 3.

Внутренняя сборка с оптимизацией

После завершения настройки запустите npm run dev, чтобы проверить!

После перехода к http://localhost:3000 поведение приложения Nuxt 3 остается прежним, но изменяется использование полосы пропускания приложения Nuxt 3.

Следующее - сравнение размеров бандлов, измеренных в вкладке сети devtools с и без @intlify/unplugin-vue-i18n:

Выделенная синим область - это код, собранный vite.

После установки этого плагина, плагин внутренне настроит модуль Vue I18n только для выполнения. А именно, в конфигурации vite resolve.alias, устанавливается псевдоним vue-i18n для использования только времени выполнения Vue I18n (vue-i18n/dist/vue-i18n.runtime.esm-bundler.js). Это настройка уменьшает размер бандла, поскольку компилятор сообщений, используемый Vue I18n, не включен.

За дополнительными подробностями обращайтесь к документации @intlify/unplugin-vue-i18n docs

Также вы можете увидеть изменения в сборке ресурсов локали.

Код ресурсов локали зависит от того, установлен ли плагин @intlify/unplugin-vue-i18n в vite.plugins. Ниже:

Без плагина @intlify/unplugin-vue-i18n в vite.plugins, ресурсы локали собираются как json, а с этим плагином ресурсы локали преобразуются из json в код JavaScript для экономии полосы пропускания.

Vue I18n просто вызывает функции, так как они уже были скомпилированы.

В этом руководстве приложение Nuxt 3 небольшое, поэтому мы не можем достаточно ощутить производительность оптимизации, но по мере увеличения приложения, это обязательно принесет пользу.