Composants à fichier unique

Utilisation de base

Si vous construisez un composant Vue ou une application Vue en utilisant des composants à fichier unique, vous pouvez gérer les messages locaux en utilisant le bloc personnalisé i18n.

Voici dans exemple de composants à fichier unique:

<script>
export default {
  name: 'App'
}
</script>

<template>
  <label for="locale">locale</label>
  <select v-model="$i18n.locale">
    <option>en</option>
    <option>ja</option>
  </select>
  <p>message: {{ $t('hello') }}</p>
</template>

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "zh": {
    "hello": "你好，世界"
  }
}
</i18n>

Dans les blocs personnalisés i18n, le format des ressources de messages locaux est au format json par défaut.

Les messages locaux définis par les blocs personnalisés i18n sont utilisés comme portée locale dans les composants à fichier unique.

Si $t('hello') est utilisé dans le template, la clé hello définie par les blocs personnalisés i18n est référencée.

NOTE

L'API Composition nécessite que useI18n renvoie le contexte setup afin de localiser en se référant aux messages locaux définis dans les blocs personnalisés i18n.

Pour savoir comment utiliser useI18n, voir l'API Composition

Pour utiliser les blocs personnalisés i18n, vous devez utiliser les plugins suivants pour le bundler.

Empaquetage avec Vite

unplugin-vue-i18n

unplugin est un système de plugins unifié pour les outils d'empaquetage tels que vite, webpack, rollup, esbuild, etc.

unplugin-vue-i18n pour vite et webpack.

EXIGENCES

• vite : v3 ou ultérieur
• @vitejs/plugin-vue : v3.2.0 ou ultérieur.

Installation

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 du plugin pour Vite

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'node:url'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // option de compilation préalable des ressources de messages locaux
      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    }),
  ],
})

Configuration du plugin pour Webpack

// webpack.config.js
const path = require('path')
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // option de compilation préalable des ressources de messages locaux
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

CLI Quasar

Si nous souhaitons ajouter la prise en charge de la balise <i18n> à l'intérieur d'un composant à fichier unique dans un projet Quasar CLI, nous devons modifier la configuration existante.

Pour cela, nous devons modifier quasar.conf.js à la racine de notre projet :

{
  chain => {
    chain.module
      .rule('i18n-resource')
        .test(/\.(json5?|ya?ml)$/)
          .include.add(path.resolve(__dirname, './src/i18n'))
          .end()
        .type('javascript/auto')
        .use('i18n-resource')
          .loader('@intlify/vue-i18n-loader')
    chain.module
      .rule('i18n')
        .resourceQuery(/blockType=i18n/)
        .type('javascript/auto')
        .use('i18n')
          .loader('@intlify/vue-i18n-loader')
  }
}

Nous devons également nous assurer que nous avons installé @intlify/vue-i18n-loader :

npm

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

yarn

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

pnpm

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