Componentes de archivo único

Uso básico

Si estás construyendo un componente Vue o una aplicación Vue utilizando componentes de archivo único, puedes gestionar los mensajes locales usando el bloque personalizado i18n.

El siguiente ejemplo se encuentra en ejemplo de componentes de archivo único:

<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!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

En los bloques personalizados i18n, el formato del recurso de mensajes locales es por defecto formato json.

Los mensajes locales definidos por los bloques personalizados i18n se utilizan como el ámbito local en componentes de archivo único.

Si se utiliza $t('hello') en la plantilla, se hace referencia a la clave hello definida por los bloques personalizados i18n.

NOTA

La API de Composición requiere que useI18n devuelva el contexto setup para poder localizar con referencia a los mensajes locales definidos en los bloques personalizados i18n.

Para ver cómo usar useI18n, consulta la API de Composición

Para utilizar los bloques personalizados i18n, necesitas usar los siguientes plugins para el empaquetador.

Empaquetado con Vite

unplugin-vue-i18n

unplugin es un sistema de plugins unificado para herramientas de empaquetado como vite, webpack, rollup, esbuild, entre otras.

unplugin-vue-i18n para vite y webpack.

REQUISITOS

• vite: v3 o posterior
• @vitejs/plugin-vue: v3.2.0 o posterior.

Instalación

npm

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

yarn

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

pnpm

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

Configurar plugin para 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 */
      // opción de compilación previa del recurso de mensajes locales
      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    }),
  ],
})

Configurar plugin para Webpack

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

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // opción de compilación previa del recurso de mensajes locales
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

CLI de Quasar

Si queremos añadir soporte a la etiqueta <i18n> dentro de un componente de archivo único en un proyecto Quasar CLI, entonces necesitamos modificar la configuración existente.

Para ello necesitamos editar quasar.conf.js en la raíz de nuestro proyecto:

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

También necesitamos asegurarnos de haber instalado @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