Intégration avec Nuxt 3

Nous recommandons d'utiliser Nuxt I18n (@nuxtjs/i18n) pour utiliser Vue I18n avec Nuxt 3 avec des fonctionnalités avancées telles que l'acheminement localisé, les balises SEO et bien plus encore.

Création de votre propre intégration Nuxt 3

Le contenu suivant est un tutoriel sur la configuration d'une application Nuxt 3 avec votre propre intégration en ajoutant Vue I18n via un plugin Nuxt.

Avertissement

Ce tutoriel d'intégration ne prend pas en charge les fonctionnalités i18n avancées (telles que l'acheminement et les balises SEO) et est destiné à des fins de démonstration, envisagez d'utiliser le module Nuxt I18n consultez sa documentation sur i18n.nuxtjs.org pour plus de détails.

Conditions requises

Les exigences Node.js pour ce tutoriel sont les mêmes que pour Nuxt 3.

Veuillez consulter ici pour la version Node.js de Nuxt 3.

Codes d'exemple

Vous pouvez obtenir le code pour le tutoriel ci-dessous sur examples/frameworks/nuxt3.

Vous pouvez également voir une application déployée réalisée selon ce tutoriel avec une action GitHub personnalisée pour fournir des traductions depuis DeepL dans ce projet nuxt3-app-vue-i18n.

Configuration de vue-i18n sur l'application Nuxt 3

Nous allons maintenant configurer l'environnement initial pour utiliser Vue I18n avec Nuxt 3.

Création de l'application Nuxt 3

Exécutez la commande suivante pour créer une application Nuxt 3 :

npx

npx nuxi init nuxt3-app-vue-i18n

pnpm

pnpm dlx nuxi init nuxt3-app-vue-i18n

Une fois que nous avons exécuté la commande ci-dessus, le projet initial Nuxt 3 créé aura la structure de répertoire suivante :

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

Installation de Vue I18n

Installez Vue I18n avec la commande suivante :

npm

npm install vue-i18n -D

yarn

yarn add vue-i18n -D

pnpm

pnpm add -D vue-i18n

Configuration du plugin Nuxt

Créez un répertoire plugins comme suit :

mkdir plugins

Ensuite, créez un fichier plugin Nuxt pour configurer Vue I18n.

touch plugins/i18n.ts

Une fois créé, définissez le plugin comme suit :

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)
})

La configuration des ressources locales pour localiser une application Nuxt 3 est décrite dans la section suivante

Exécution de l'application Nuxt 3

Vérifions si Vue I18n fonctionne avec Nuxt 3.

Nous allons modifier app.vue de l'application Nuxt 3 configurée comme suit :

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

Nous avons modifié et sauvegardé, exécutez la commande suivante pour exécuter l'application Nuxt 3 en local :

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

Une fois que l'application est servie sur http://localhost:3000, nous verrons ce qui suit :

Localisation de votre application Nuxt 3

Jusqu'à présent, nous avons pu intégrer Vue I18n dans notre application Nuxt 3. Mettons en place le changement de langue et l'importation des ressources locales depuis l'extérieur.

En implémentant le changement de langue, nous internationalisons effectivement notre application Nuxt 3. 🌎 🌍 🌏

De plus, lorsque nous séparons les ressources locales du code source (en les externalisant), nous pouvons utiliser un workflow séparé avec l'aide du service de localisation afin de localiser l'application.

Dans les sections suivantes, nous activerons la prise en charge de l'anglais, du français et du japonais sur notre application Nuxt 3.

Ajout du changement de langue

Nous allons ajouter la fonctionnalité de changement de langue à app.vue comme suit :

<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>

Le changement de langue est implémenté en utilisant l'élément select dans form. La valeur de chaque option définit la valeur du code de locale, qui sera expliquée plus tard dans l'externalisation des ressources locales.

La valeur de chaque option définit la valeur du code de locale, qui sera expliquée plus tard dans l'externalisation des ressources locales.

Externalisation des ressources locales

Nous allons définir les ressources locales comme externes.

Il existe plusieurs formats de fichiers pris en charge par Vue I18n, nous opterons pour JSON dans ce cas particulier.

Créons un répertoire non "standard Nuxt-3" nommé locales en exécutant :

mkdir locales

Maintenant, créons les fichiers JSON pour chacune des langues que nous souhaitons prendre en charge :

touch locales/en.json # pour l'anglais
touch locales/fr.json # pour le français
touch locales/ja.json # pour le japonais

Remplissons-les avec le contenu suivant :

Pour l'anglais dans locales/en.json :

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

Pour le français dans locales/fr.json :

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

Pour le japonais dans locales/ja.json :

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

Importation des ressources locales

"Enregistrons" les langues dans notre plugin (plugins/i18n.ts) comme suit :

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)
})

L'option messages est celle qui contient les ressources locales que nous enregistrons et qui peut être aussi granulaire que nous le souhaitons. Cette granularité facilite l'intégration avec le service de localisation.

Exécutons npm run dev (ou yarn dev ou pnpm dev) et accédons à http://localhost:3000 pour vérifier si les modifications effectuées jusqu'à présent fonctionnent.

L'application Nuxt 3 est maintenant prête pour une internationalisation basique ! 🎉

Optimisation avec @intlify/unplugin-vue-i18n

Jusqu'à présent, vous avez pu utiliser Vue I18n pour supporter le changement de langue sur l'application Nuxt 3. De plus, en externalisant les ressources locales, vous les avez séparées du code source, facilitant ainsi la gestion des ressources locales et leur intégration avec le service de localisation.

Cependant, comme décrit dans Optimisation, l'application Nuxt 3 préparée jusqu'à présent n'est pas optimale en termes de taille de bundle.

Depuis Vue I18n v9, le compilateur de messages permet la compilation préalable des ressources locales pour améliorer les performances, mais cela n'a pas encore été optimisé pour cette performance.

Entrez @intlify/unplugin-vue-i18n, un plugin Vue I18n pour optimiser les performances.

Installation de @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

Configuration de Nuxt

Configurez nuxt.config.ts comme suit :

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') 
        ] 
      }) 
    ] 
  } 
})

Le bundler pour Nuxt 3 est vite par défaut. Nous utiliserons donc l'option vite ici pour l'optimisation.

Dans vite.plugins, le plugin pour @intlify/unplugin-vue-i18n est configuré. En tant qu'option de ce plugin, l'option include spécifie les ressources locales au format json placées dans le répertoire locales. Cela permet à @intlify/unplugin-vue-i18n de compiler préalablement les ressources locales au moment du bundle en utilisant interne le compilateur de messages Vue I18n. Cela améliore les performances de traduction de Vue I18n et donc les performances de rendu des applications Nuxt 3.

Intégration avec le bundle avec optimisation

Une fois la configuration terminée, exécutons npm run dev pour le tester !

Après avoir accédé à http://localhost:3000, le comportement de l'application Nuxt 3 reste le même, mais il y a un changement dans la bande passante de l'application Nuxt 3.

Voici une comparaison des tailles de bundle mesurées dans l'onglet réseau des outils de développement avec et sans @intlify/unplugin-vue-i18n :

La zone mise en évidence en bleu est le code regroupé par vite.

En configurant ce plugin, celui-ci configurera interne un module Vue I18n en mode runtime uniquement. Plus précisément, dans la configuration vite resolve.alias, l'alias vue-i18n est défini pour utiliser uniquement le runtime Vue I18n (vue-i18n/dist/vue-i18n.runtime.esm-bundler.js). Ce paramètre réduit la taille du bundle puisque le compilateur de messages utilisé par Vue I18n n'y est pas inclus.

Pour plus de détails, voir la documentation de @intlify/unplugin-vue-i18n

De plus, vous pouvez voir les modifications dans le regroupement des ressources locales.

Le code pour les ressources locales, selon que le plugin @intlify/unplugin-vue-i18n soit ou non configuré dans vite.plugins. Ci-dessous :

Sans le plugin @intlify/unplugin-vue-i18n dans vite.plugins, les ressources locales sont regroupées en json, mais avec ce plugin configuré, les ressources locales sont converties de json en code JavaScript pour la bande passante.

Vue I18n appelle simplement les fonctions puisqu'elles ont déjà été compilées.

Dans ce guide, l'application Nuxt 3 est petite, nous ne pouvons pas suffisamment expérimenter les performances de l'optimisation mais à mesure que l'application grandit, elle bénéficiera certainement de celle-ci.