Primeros Pasos
Configuración i18n
Configura internacionalización en tu proyecto con los idiomas incluidos de Spartan.
Spartan incluye traducciones integradas para sus componentes en cinco idiomas. Para que estos textos se muestren correctamente, tu proyecto debe estar configurado con vue-i18n.
Idiomas soportados
| Código | Idioma |
|---|---|
es | Español |
en | Inglés |
it | Italiano |
pt | Portugués |
fr | Francés |
Instalación de vue-i18n
Si tu proyecto aún no usa vue-i18n, instálalo:
Terminal
npm install vue-i18n
Configuración básica
Importa las traducciones que exporta Spartan e incorpóralas en tu instancia de i18n:
main.ts
import '@placetopay/spartan-vue/style.css'
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'
import { es, en } from '@placetopay/spartan-vue/locales'
const i18n = createI18n({
locale: 'es',
fallbackLocale: 'en',
legacy: false,
messages: {
es,
en,
},
})
const app = createApp(App)
app.use(i18n)
app.mount('#app')
Es importante usar
legacy: false para que vue-i18n funcione en modo Composition API, que es el modo soportado por los componentes de Spartan.Agregar traducciones propias
Si necesitas combinar las traducciones de Spartan con las de tu aplicación, fusiona los mensajes usando spread:
main.ts
import { es as spartanEs, en as spartanEn } from '@placetopay/spartan-vue/locales'
const messages = {
es: {
...spartanEs,
// tus traducciones personalizadas
app: {
title: 'Mi Aplicación',
welcome: 'Bienvenido',
},
},
en: {
...spartanEn,
app: {
title: 'My Application',
welcome: 'Welcome',
},
},
}
Las traducciones de Spartan usan un espacio de nombres interno propio, por lo que es poco probable que haya conflictos con tus claves de traducción.
Cambio dinámico de idioma
Con vue-i18n en modo Composition API puedes cambiar el idioma en tiempo de ejecución:
LanguageSwitcher.vue
<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const idiomas = [
{ code: 'es', nombre: 'Español' },
{ code: 'en', nombre: 'English' },
{ code: 'fr', nombre: 'Français' },
]
</script>
<template>
<div>
<button
v-for="idioma in idiomas"
:key="idioma.code"
@click="locale = idioma.code"
>
{{ idioma.nombre }}
</button>
</div>
</template>