Internacionalização (i18n)

• Idiomas disponíveis
• Usando um locale
• Alterando o locale ativo
  • Usando changeLocale
  • Usando setLocale
  • Usando config raiz
• Sobrescrevendo
• Adicionando seu idioma

O FormKit vem com suporte à internacionalização para todas as suas interfaces e mensagens de validação.

Idiomas disponíveis

Atualmente, o FormKit suporta os seguintes idiomas (no pacote @formkit/i18n):

• 🇱🇾 Árabe (ar) — 🙏 @Ahmedelforjani
• 🇦🇿 Azeri (az) — 🙏 @EmrullahKutlar
• 🇧🇬 Búlgaro (bg) — 🙏 @ivanov1234159
• 🇧🇦 Bósnio (bs) — 🙏 @TarikTz
• Catalão (ca) — 🙏 @petergithubmgw
• 🇨🇳 Chinês (zh) — 🙏 @myleslee
• 🇨🇳 Chinês Tradicional (zh-TW) — 🙏 @actocoa
• 🇭🇷 Croata (hr) — 🙏 @antemarkic
• 🇨🇿 Tcheco (cs) — 🙏 @dfridrich
• 🇩🇰 Dinamarquês (da) — 🙏 @bjerggaard
• 🇳🇱 Holandês (nl) — 🙏 @arjendejong12
• 🇺🇸 Inglês (en)
• 🇫🇮 Finlandês - (fi) — 🙏 @mihqusta
• 🇫🇷 Francês (fr) — 🙏 @HoreKk, @pop123123123
• Frísio (fy) — 🙏 @arjendejong12
• 🇩🇪 Alemão (de) — 🙏 @digitalkaoz, @tosling
• 🇬🇷 Grego (el) — 🙏 @mendrinos
• 🇮🇱 Hebraico (he) - 🙏 @Hepi420
• 🇭🇺 Húngaro (hu) — 🙏 @KristofKekesi
• 🇮🇸 Islandês (is) - 🙏 @Gunsobal
• 🇮🇩 Indonésio (id) - 🙏 @rama-adi
• 🇮🇹 Italiano (it) - 🙏 @punga78, @Archetipo95
• 🇯🇵 Japonês (ja) - 🙏 @wonyx
• 🇰🇿 Cazaque (kk) - 🙏 @ilya-raevskiy
• 🇰🇷 Coreano (ko) - 🙏 @bwp618, @titusdecali
• 🇱🇻 Letão (lv) - 🙏 @Bamslation
• 🇱🇹 Lituano (lt) - 🙏 @balu-lt
• 🇲🇳 Mongol (mn) - 🙏 @zemunkh
• 🇳🇴 Norueguês Bokmål (nb) - 🙏 @hognevevle
• 🇮🇷 Persa (fa) - 🙏 @shahabbasian
• 🇵🇱 Polonês (pl) - 🙏 @xxSkyy
• 🇧🇷 Português (pt) 🙏 @r-martins, @dbomfim
• 🇷🇴 Romeno (ro) - 🙏 @danve
• 🇷🇺 Russo (ru) - 🙏 @andreimakushkin
• 🇸🇰 Eslovaco (sk) - 🙏 @neridev
• 🇸🇮 Esloveno (sl) - 🙏 @krisflajs
• 🇷🇸 Sérvio (sr) - 🙏 @milos5593
• 🇦🇷 Espanhol (es) - 🙏 @inibg
• 🇸🇪 Sueco (sv) - 🙏 @purung
• 🇹🇯 Tadjique (tg) - 🙏 @devixrootix
• 🇹🇱 Tétum (tet) - 🙏 @joshbrooks
• 🇹🇭 Tailandês (th) - 🙏 @pknn
• 🇺🇦 Ucraniano (uk) - 🙏 @aresofficial
• 🇺🇿 Uzbeque (uz) - 🙏 @root5427
• 🇹🇷 Turco (tr) - 🙏 @ragokan, @cemkaan
• 🇻🇳 Vietnamita (vi) - 🙏 @oanhnn

Embora as bandeiras sejam representações pobres de idiomas (bandeiras indicam uma nação geográfica, enquanto idiomas podem ser falados em muitas áreas do mundo), usamos as bandeiras na lista acima para indicar a localização do colaborador que criou aquela localidade específica.

Usando um locale

A defaultConfig do FormKit inclui o locale inglês por padrão — para adicionar um locale adicional, importe-o de @formkit/i18n e acrescente-o à opção locales quando inicializar o plugin FormKit. Para definir o locale ativo, especifique-o com a opção locale:

import { createApp } from 'vue'
import App from 'App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import { de, fr, zh } from '@formkit/i18n'

const app = createApp(App)
app.use(
  plugin,
  defaultConfig({
    // Definir locales adicionais
    locales: { de, fr, zh },
    // Definir o locale ativo
    locale: 'fr',
  })
)
app.mount('#app')

Alterando o locale ativo

Existem três maneiras de alterar seu locale ativo:

• Usando changeLocale para alterar globalmente o locale.
• Usando this.$formkit.setLocale() a partir do plugin Vue (melhor para a API de opções).
• Raramente usado, mas útil para modificar diretamente o objeto config raiz.

Usando changeLocale

Você pode alterar o locale de todos os inputs do FormKit usando o composable changeLocale. Este é o método preferido quando uma mudança global é necessária:

Usando setLocale

Ao usar a API de opções do Vue, você tem acesso a this.$formkit, que contém setLocale('de') — um método criado especificamente para alterar globalmente o locale atual:

Usando config raiz

Ao usar a API de composição, você não terá acesso a this.$formkit. Em vez disso, você pode buscar e modificar o objeto de configuração raiz do FormKit. Isso é disponibilizado globalmente através do mecanismo inject do Vue e um Symbol único:

Sobrescrevendo

Se você encontrar uma frase em seu locale que não está formulada da maneira que prefere, você pode sobrescrever essas mensagens individuais globalmente em sua configuração. Você pode fazer isso fornecendo um objeto messages para o defaultConfig:

import { createApp } from 'vue'
import { plugin, defaultConfig } from '@formkit/vue'
import App from 'App.vue'

const app = createApp(App)
app.use(
  plugin,
  defaultConfig({
    messages: {
      en: {
        ui: {
          submit: '🚀 Lançar',
        },
      },
    },
  })
)

Adicionando seu idioma

Escrever uma localização para um idioma que você conhece é uma ótima maneira de contribuir para o FormKit e uma maneira fácil de começar com o código aberto também! Estamos sempre ansiosos para ver pull requests de novas localidades. Para apoiar esse esforço, criamos um construtor de localidades — um pequeno aplicativo web para tornar o processo de tradução o mais fácil possível.

Claro, você não é obrigado a usar nosso construtor de localidades para enviar um idioma, e é mais do que bem-vindo para enviar um pull request padrão com sua localidade incluída.