Subconjunto de tamaño pequeño de Vue I18n

petite-vue-i18n es una distribución alternativa de Vue I18n, que proporciona solo características mínimas.

¿Cuál es la diferencia con Vue I18n?

• El tamaño es más pequeño que vue-i18n
  • CDN o sin un Bundler
    • Reducción del tamaño del paquete: runtime + compiler ~32%, runtime solo ~45%
    • petite-vue-i18n: runtime + compiler ~9.61KB, runtime solo ~5.51KB (build de producción, compresión brotli)
    • vue-i18n: runtime + compiler ~14.18KB, runtime solo ~10.12KB (build de producción, compresión brotli)
  • Módulos ES para navegador
    • Reducción del tamaño del paquete: runtime + compiler ~32%, runtime solo ~45%
    • petite-vue-i18n: runtime + compiler ~10.51KB, runtime solo ~6.20KB (build de producción, compresión brotli)
    • vue-i18n: runtime + compiler ~15.40KB, runtime solo ~11.12KB (build de producción, compresión brotli)
  • Tamaño del paquete de la aplicación
    • Reducción del tamaño desde vue-i18n: ~10% (medición del tamaño del código de vue-i18n y petite-vue-i18n)
• La API heredada no es compatible, solo la API de composición
• Las APIs para los siguientes formatos de fecha y hora, formatos numéricos y utilidades no están incluidas. Solo traducción
  • n, $n
  • d, $d
  • rt, $rt
  • tm, $tm
  • getDateTimeFormat, setDateTimeFormat, mergeDateTimeFormat
  • getNumberFormat, setNumberFormat, mergeNumberFormat
• Los únicos mensajes locales que se pueden manejar son clave-valores simples. Si necesitas manejar mensajes locales jerárquicos, necesitas personalizarlos usando la API
• El algoritmo de fallback local es el orden del array especificado en fallbackLocale
• La directiva personalizada v-t no está incluida
• Los siguientes componentes proporcionados por vue-i18n no están incluidos
  • Traducción i18n-t
  • Formato de Fecha y Hora i18n-d
  • Formato Numérico i18n-n

Caso de uso de petite-vue-i18n

vue-i18n incluye varias características i18n tales como traducción, formato de fechas y formatos numéricos. Algunos proyectos solo utilizan la traducción y no los formatos de fecha. Actualmente, incluso en ese caso, el código para esa característica está incluido.

Si tu proyecto solo usa las API t o $t para traducción, te recomendamos usar petite-vue-i18n mejor que vue-i18n. Y si tu proyecto necesita las funciones de vue-i18n, puedes migrar fácilmente desde petite-vue-i18n hacia vue-i18n. Esto significa que es una mejora progresiva.

Instalación

Básicamente, es lo mismo que instalar vue-i18n. La única diferencia es que la parte de la URL o ruta se cambia de vue-i18n a petite-vue-i18n.

CDN

Necesitas insertar los siguientes scripts al final de <head>:

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/petite-vue-i18n"></script>

El siguiente es el código de aplicación con la etiqueta script:

<script>
const { createApp } = Vue
const { createI18n } = PetiteVueI18n

const i18n = createI18n({
  // opciones de vue-i18n aquí...
})

const app = createApp({
  // opciones de vue aquí...
})

app.use(i18n)
app.mount('#app')
</script>

Gestores de paquetes

npm

npm install petite-vue-i18n@next --save

yarn

yarn add petite-vue-i18n@next

pnpm

pnpm add petite-vue-i18n@next

import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  // opciones de vue-i18n aquí...
})

const app = createApp({
  // opciones de vue aquí...
})

app.use(i18n)
app.mount('#app')

Usos

Hola mundo

Plantilla:

<div id="app">
  <h1>{{ t('hello world') }}</h1>
</div>

Scripts:

const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n
// o para módulos ES
// import { createApp } from 'vue'
// import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      'hello world': 'Hello world!'
    },
    ja: {
      'hello world': 'こんにちは、世界！'
    }
  }
})

// definir componente App
const App = {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

const app = createApp(App)

app.use(i18n)
app.mount('#app')

Usar el mismo resolvedor de mensajes y fallback de idioma como vue-i18n

En petite-vue-i18n, el resolvedor de mensajes y el fallback de idioma usan implementaciones simples para optimizar el tamaño del código, tal como se describe en la sección de diferencias, como se muestra abajo:

• resolvedor de mensaje
  • Resuelve mensajes locales estilo clave-valor
  • Acerca de la implementación, mira aquí
• fallback de idioma
  • Hace fallback según el orden del array especificado en fallbackLocale
  • Si se especifica un idioma simple como cadena, hace fallback a ese idioma
  • Acerca de la implementación, mira aquí

Si quieres usar el mismo resolvedor de mensajes y fallback de idioma como vue-i18n, puedes cambiarlos usando la API.

Ten en cuenta que por ahora, solo se soportan empaquetadores como vite y webpack.

Necesitas instalar @intlify/core-base en tu proyecto con un gestor de paquetes.

npm

npm install --save @intlify/core-base@next

yarn

yarn add @intlify/core-base@next

pnpm

pnpm add @intlify/core-base@next

Entonces, en el punto de entrada de la aplicación, configura el resolvedor de mensajes y fallback de idioma usando la API como se muestra a continuación:

import { createApp } from 'vue'
import {
  createI18n,
  registerMessageResolver, // registrar la API del resolvedor de mensajes
  registerLocaleFallbacker, // registrar la API del fallback de idioma
} from 'petite-vue-i18n'
import {
  resolveValue, // resolvedor de mensajes de vue-i18n usado por defecto
  fallbackWithLocaleChain // fallback de idioma de vue-i18n usado por defecto
} from '@intlify/core-base'

// registrar resolvedor de mensajes de vue-i18n
registerMessageResolver(resolveValue)

// registrar fallback de idioma de vue-i18n
registerLocaleFallbacker(fallbackWithLocaleChain)

// código adicional...
// ...

Con la configuración anterior, el resolución de mensajes locales y el fallback de idioma se manejarán de la misma manera que en vue-i18n, ten en cuenta que el tamaño del código aumentará ligeramente.

Configurar el plugin del empaquetador

Si estás construyendo tu aplicación con una herramienta de compilación como vite, debes configurarla. Por favor establece la opción 'module' en @intlify/unplugin-vue-i18n en la configuración como se muestra a continuación.

NOTE

Sobre la configuración de @intlify/unplugin-vue-i18n, mira la sección 'rendimiento' y la documentación de @intlify/unplugin-vue-i18n

IMPORTANT

La versión de @intlify/unplugin-vue-i18n debe ser 5.1.0 o superior

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

 export default defineConfig({
   /* ... */
   plugins: [
     /* ... */
     VueI18nPlugin({
       /* opciones */
+      module: 'petite-vue-i18n',
       // opción de pre-compilación de recursos de mensajes locales
       include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
     }),
   ],
 })

Cambiar sin modificar el identificador de importación

Puedes cambiar desde vue-i18n a petite-vue-i18n en tu aplicación usando alias npm sin modificar el identificador de importación.

package.json:

 {
   // ...
   "dependencies": {
     "vue": "^3.4.14",
-     "vue-i18n": "^10.0.0"
+     "vue-i18n": "npm:petite-vue-i18n@^10.0.0"
   },
 }

Necesitas @intlify/unplugin-vue-i18n para construir tu aplicación.