Migration depuis Vue 2

`vue-i18n-bridge`

NOTE

vue-i18n-bridge ne sera pas fourni dans la version v10 en raison de la fin de vie de Vue 2. La v9.13 sera la dernière version.

Qu'est-ce que `vue-i18n-bridge` ?

vue-i18n-bridge est un pont pour faciliter la mise à niveau au maximum entre [email protected] ou ultérieur et [email protected].

Il peut être utilisé dans les applications Vue 2 que vous avez déjà construites avec [email protected] ou ultérieur.

Et, certaines fonctionnalités sont également rétroportées depuis [email protected] :

Vue I18n Composition API, qui est alimentée par @vue/composition-api et vue-demi
Syntaxe du format de message, qui est alimentée par @intlify/message-compiler

Installation

Gestionnaire de paquets

npmyarnpnpm

npm install vue-i18n-bridge

yarn add vue-i18n-bridge

pnpm add vue-i18n-bridge

Vous devez installer les paquets suivants avant d'utiliser cette bibliothèque :

vue-i18n : >= v8.26.1 < v9
vue-demi : >= v0.13.5
@vue/composition-api : >= v1.2.0 (si vous utilisez Vue 2.6)

CDN

Pour Vue 2.7 :

Incluez vue-i18n-bridge après vue, vue-demi et il s'installera.

html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>

Pour Vue 2.6 :

Incluez vue-i18n-bridge après vue, @vue/composition-api, vue-demi et il s'installera.

html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>

Utilisation

Composition API

Pour Vue 2.7 :

import Vue from 'vue'
import { createApp } from 'vue-demi'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // vous devez spécifier l'option de plugin '{ bridge: true }' lors de l'installation de vue-i18n

// Les options de `createI18n` sont presque identiques à l'API vue-i18n ([email protected])
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` fourni par `vue-i18n-bridge` dispose d'un deuxième argument, vous **devez** passer le constructeur `VueI18n` fourni par `vue-i18n`

const app = createApp({
 setup() {
   // Les options de `useI18n` sont presque identiques à l'API vue-i18n ([email protected])
   const { t, locale } = useI18n()
   // ... faire quelque chose

   return { t, locale }
 }
})

app.use(i18n) // vous devez installer l'instance `i18n` créée par `createI18n`
app.mount('#app')

Pour Vue 2.6 :

import Vue from 'vue'
import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // vous devez spécifier l'option de plugin '{ bridge: true }' lors de l'installation de vue-i18n

// Les options de `createI18n` sont presque identiques à l'API vue-i18n ([email protected])
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` fourni par `vue-i18n-bridge` dispose d'un deuxième argument, vous **devez** passer le constructeur `VueI18n` fourni par `vue-i18n`

const app = createApp({
 setup() {
   // Les options de `useI18n` sont presque identiques à l'API vue-i18n ([email protected])
   const { t, locale } = useI18n()
   // ... faire quelque chose

   return { t, locale }
 }
})

app.use(i18n) // vous devez installer l'instance `i18n` créée par `createI18n`
app.mount('#app')

Legacy API

Pour Vue 2.7 :

import Vue from 'vue'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // vous devez spécifier l'option de plugin '{ bridge: true }' lors de l'installation de vue-i18n

// Les options de `createI18n` sont presque identiques à l'API vue-i18n ([email protected])
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` fourni par `vue-i18n-bridge` dispose d'un deuxième argument, vous **devez** passer le constructeur `VueI18n` fourni par `vue-i18n`

Vue.use(i18n) // vous devez installer l'instance `i18n` créée par `createI18n`

const app = new Vue({ i18n })
app.$mount('#app')

Pour Vue 2.6 :

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // vous devez spécifier l'option de plugin '{ bridge: true }' lors de l'installation de vue-i18n

// Les options de `createI18n` sont presque identiques à l'API vue-i18n ([email protected])
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` fourni par `vue-i18n-bridge` dispose d'un deuxième argument, vous **devez** passer le constructeur `VueI18n` fourni par `vue-i18n`

Vue.use(i18n) // vous devez installer l'instance `i18n` créée par `createI18n`

const app = new Vue({ i18n })
app.$mount('#app')

Pour TypeScript :

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n, castToVueI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

// vous devez caster l'instance `i18n`
const i18n = castToVueI18n(createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n))

Vue.use(i18n)

const app = new Vue({ i18n })
app.$mount('#app')

Utilisation du module UMD dans le navigateur

Pour Vue 2.7

const { createApp } = VueDemi // exporté UMD nommé par `VueDemi`
const { createI18n, useI18n } = VueI18nBridge // exporté UMD nommé par `VueI18nBridge`

Vue.use(VueI18n, { bridge: true })

const i18n = createI18n({
  locale: 'ja',
  messages: {
    // ...
  }
}, VueI18n)

const app = createApp({}, {
  // ...
})
app.use(i18n)
app.mount('#app') // élément conteneur de l'application Vue

Pour Vue 2.6

const { createApp } = VueCompositionAPI // exporté UMD nommé par `VueCompositionAPI`
const { createI18n, useI18n } = VueI18nBridge // exporté UMD nommé par `VueI18nBridge`

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

const i18n = createI18n({
  locale: 'ja',
  messages: {
    // ...
  }
}, VueI18n)

const app = createApp({}, {
  // ...
})
app.use(i18n)
app.mount('#app') // élément conteneur de l'application Vue

Limitations

En mode Legacy API, vous ne pouvez pas utiliser la nouvelle syntaxe de format de message en la migrant depuis vue-i18n
- cela n'est possible que en mode Composition API
En mode Legacy API, vous ne pouvez pas utiliser les composants rétroportés qui suivent les composants en les migrant depuis vue-i18n
- Composants de traduction : <i18n-t>
- Composants de format de date : <i18n-d>
- Composants de format de nombre : <i18n-n>
En mode Composition API, les API ci-dessous ayant pour préfixe $ sont dans la portée globale
- $t
- $d
- $n

Explication des différentes constructions

Dans le répertoire dist/ du paquet npm vous trouverez de nombreuses constructions différentes de vue-i18n-bridge. Voici un aperçu du fichier dist à utiliser selon le cas d'utilisation.

Depuis CDN ou sans bundler

vue-i18n-bridge(.runtime).global(.prod).js :
- Pour une utilisation directe via <script src="..."> dans le navigateur. Expose le global VueI18nBridge
- Compilation de format de message dans le navigateur :
  - vue-i18n-bridge.global.js est la construction "complète" qui inclut à la fois le compilateur et le runtime, donc elle permet de compiler les formats de message à la volée
  - vue-i18n-bridge.runtime.global.js ne contient que le runtime et nécessite que les formats de message soient pré-compilés pendant une étape de construction
- Insère tous les paquets internes du cœur de Vue I18n - c'est-à-dire un seul fichier sans dépendances sur d'autres fichiers. Cela signifie que vous devez importer tout depuis ce fichier et uniquement depuis ce fichier pour vous assurer d'obtenir la même instance de code
- Contient des ramifications prod/dev codées en dur, et la construction prod est pré-minifiée. Utilisez les fichiers *.prod.js pour la production

NOTICE

Les constructions globales ne sont pas des constructions UMD. Elles sont construites sous forme d'IIFEs et ne sont conçues que pour une utilisation directe via <script src="...">.

vue-i18n-bridge(.runtime).esm-browser(.prod).js :
- Pour une utilisation via les imports de modules ES natifs (dans le navigateur via <script type="module">)
- Partage la même compilation de runtime, l'inlining des dépendances et le comportement codé en dur prod/dev avec la construction globale

Avec un bundler

vue-i18n-bridge(.runtime).esm-bundler.js :
- Pour une utilisation avec des bundlers comme webpack, rollup et parcel
- Laisse les branches prod/dev avec les gardes process.env.NODE_ENV (doit être remplacé par le bundler)
- Ne livra pas les constructions minifiées (à faire avec le reste du code après le bundling)
- Importe les dépendances (ex. @intlify/core-base, @intlify/message-compiler)
  - Les dépendances importées sont aussi des constructions esm-bundler et importeront à leur tour leurs dépendances (ex. @intlify/message-compiler importe @intlify/shared)
  - Cela signifie que vous pouvez installer/importer ces dépendances individuellement sans avoir différentes instances de ces dépendances, mais vous devez vous assurer qu'elles résolvent toutes vers la même version
- Compilation des messages locaux dans le navigateur :
  - vue-i18n-bridge.runtime.esm-bundler.js est uniquement le runtime, et nécessite que tous les messages locaux soient pré-compilés. Il s'agit de l'entrée par défaut pour les bundlers (via le champ module dans package.json) car lorsque l'on utilise un bundler, les modèles sont généralement pré-compilés (ex. dans des fichiers *.json)
  - vue-i18n-bridge.esm-bundler.js (par défaut) : inclut le compilateur de runtime. Utilisez-le si vous utilisez un bundler mais souhaitez toujours la compilation des messages locaux (ex. des modèles via des chaînes JavaScript en ligne). Pour utiliser cette construction, modifiez votre instruction d'importation en : import { createI18n } from "vue-i18n-bridge/dist/vue-i18n-bridge.esm-bundler.js";

NOTICE

Si vous utilisez vue-i18n-bridge.runtime.esm-bundler.js, vous devrez précompiler tous les messages locaux, et vous pouvez le faire avec des fichiers .json (.json5) ou .yaml, des blocs personnalisés i18n pour gérer les ressources i18n. Par conséquent, vous pouvez précompiler tous les messages locaux avec le bundler et le chargeur / plugin suivant.

@intlify/unplugin-vue-i18n

Pour Node.js (Serveur)

vue-i18n-bridge.cjs(.prod).js :
- Pour une utilisation dans Node.js via require()
- Si vous regroupez votre application avec webpack avec target: 'node' et que vous externalisez correctement vue-i18n-bridge, c'est cette construction qui sera chargée
- Les fichiers dev/prod sont pré-construits, mais le fichier approprié est automatiquement requis selon process.env.NODE_ENV

`vue-i18n-composable`

La Composition API est prise en charge depuis Vue 3, et vous pouvez utiliser le plugin officiel @vue/composition-api pour rendre la Composition API disponible pour Vue 2.

La Vue I18n Composition API est également disponible dans Vue 2 en utilisant le plugin vue-i18n-composable.

Pour savoir comment l'utiliser, consultez ici

NOTICE

vue-i18n-composable permet à l'API principale de Vue I18n v8.x de fonctionner avec la Composition API. Toutes les Composition API fournies dans Vue I18n v9 ne sont pas disponibles.

general

Variables

Functions

Interfaces

Type Aliases

vue

Interfaces

Migration depuis Vue 2

`vue-i18n-bridge`

Qu'est-ce que `vue-i18n-bridge` ?

Installation

Gestionnaire de paquets

CDN

Utilisation

Composition API

Legacy API

Utilisation du module UMD dans le navigateur

Pour Vue 2.7

Pour Vue 2.6

Limitations

Explication des différentes constructions

Depuis CDN ou sans bundler

Avec un bundler

Pour Node.js (Serveur)

`vue-i18n-composable`

Migration depuis Vue 2 ​

vue-i18n-bridge ​

Qu'est-ce que vue-i18n-bridge ? ​

Installation ​

Gestionnaire de paquets ​

CDN ​

Utilisation ​

Composition API ​

Legacy API ​

Utilisation du module UMD dans le navigateur ​

Pour Vue 2.7 ​

Pour Vue 2.6 ​

Limitations ​

Explication des différentes constructions ​

Depuis CDN ou sans bundler ​

Avec un bundler ​

Pour Node.js (Serveur) ​

vue-i18n-composable ​

Migration depuis Vue 2

`vue-i18n-bridge`

Qu'est-ce que `vue-i18n-bridge` ?

Installation

Gestionnaire de paquets

CDN

Utilisation

Composition API

Legacy API

Utilisation du module UMD dans le navigateur

Pour Vue 2.7

Pour Vue 2.6

Limitations

Explication des différentes constructions

Depuis CDN ou sans bundler

Avec un bundler

Pour Node.js (Serveur)

`vue-i18n-composable`