Internationalisation (i18n)

• Langues disponibles
• Utilisation d'une locale
• Changer la locale active
  • Utiliser changeLocale
  • Utiliser setLocale
  • Utiliser config racine
• Surcharge
• Ajouter votre langue

FormKit est livré avec un support d'internationalisation pour toutes ses interfaces et messages de validation.

Langues disponibles

Actuellement, FormKit prend en charge les langues suivantes (dans le package @formkit/i18n) :

• 🇱🇾 Arabe (ar) — 🙏 @Ahmedelforjani
• 🇦🇿 Azéri (az) — 🙏 @EmrullahKutlar
• 🇧🇬 Bulgare (bg) — 🙏 @ivanov1234159
• 🇧🇦 Bosniaque (bs) — 🙏 @TarikTz
• Catalan (ca) — 🙏 @petergithubmgw
• 🇨🇳 Chinois (zh) — 🙏 @myleslee
• 🇨🇳 Chinois Traditionnel (zh-TW) — 🙏 @actocoa
• 🇭🇷 Croate (hr) — 🙏 @antemarkic
• 🇨🇿 Tchèque (cs) — 🙏 @dfridrich
• 🇩🇰 Danois (da) — 🙏 @bjerggaard
• 🇳🇱 Néerlandais (nl) — 🙏 @arjendejong12
• 🇺🇸 Anglais (en)
• 🇫🇮 Finnois - (fi) — 🙏 @mihqusta
• 🇫🇷 Français (fr) — 🙏 @HoreKk, @pop123123123
• Frison (fy) — 🙏 @arjendejong12
• 🇩🇪 Allemand (de) — 🙏 @digitalkaoz, @tosling
• 🇬🇷 Grec (el) — 🙏 @mendrinos
• 🇮🇱 Hébreu (he) - 🙏 @Hepi420
• 🇭🇺 Hongrois (hu) — 🙏 @KristofKekesi
• 🇮🇸 Islandais (is) - 🙏 @Gunsobal
• 🇮🇩 Indonésien (id) - 🙏 @rama-adi
• 🇮🇹 Italien (it) - 🙏 @punga78, @Archetipo95
• 🇯🇵 Japonais (ja) - 🙏 @wonyx
• 🇰🇿 Kazakh (kk) - 🙏 @ilya-raevskiy
• 🇰🇷 Coréen (ko) - 🙏 @bwp618, @titusdecali
• 🇱🇻 Letton (lv) - 🙏 @Bamslation
• 🇱🇹 Lituanien (lt) - 🙏 @balu-lt
• 🇲🇳 Mongol (mn) - 🙏 @zemunkh
• 🇳🇴 Norvégien Bokmål (nb) - 🙏 @hognevevle
• 🇮🇷 Persan (fa) - 🙏 @shahabbasian
• 🇵🇱 Polonais (pl) - 🙏 @xxSkyy
• 🇧🇷 Portugais (pt) 🙏 @r-martins, @dbomfim
• 🇷🇴 Roumain (ro) - 🙏 @danve
• 🇷🇺 Russe (ru) - 🙏 @andreimakushkin
• 🇸🇰 Slovaque (sk) - 🙏 @neridev
• 🇸🇮 Slovène (sl) - 🙏 @krisflajs
• 🇷🇸 Serbe (sr) - 🙏 @milos5593
• 🇦🇷 Espagnol (es) - 🙏 @inibg
• 🇸🇪 Suédois (sv) - 🙏 @purung
• 🇹🇯 Tadjik (tg) - 🙏 @devixrootix
• 🇹🇱 Tetum (tet) - 🙏 @joshbrooks
• 🇹🇭 Thaï (th) - 🙏 @pknn
• 🇺🇦 Ukrainien (uk) - 🙏 @aresofficial
• 🇺🇿 Ouzbek (uz) - 🙏 @root5427
• 🇹🇷 Turc (tr) - 🙏 @ragokan, @cemkaan
• 🇻🇳 Vietnamien (vi) - 🙏 @oanhnn

Bien que les drapeaux soient de mauvaises représentations des langues (les drapeaux indiquent une nation géographique, tandis que les langues peuvent être parlées dans de nombreuses zones du monde), nous utilisons les drapeaux dans la liste ci-dessus pour indiquer l'emplacement du contributeur qui a créé cette locale particulière.

Utilisation d'une locale

La defaultConfig de FormKit inclut la locale anglaise par défaut — pour ajouter une locale supplémentaire, importez-la depuis @formkit/i18n et ajoutez-la à l'option locales lorsque vous initialisez le plugin FormKit. Pour définir la locale active, spécifiez-la avec l'option 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({
    // Définir des locales supplémentaires
    locales: { de, fr, zh },
    // Définir la locale active
    locale: 'fr',
  })
)
app.mount('#app')

Changer la locale active

Il existe trois façons de changer votre locale active :

• Utiliser changeLocale pour changer globalement la locale.
• Utiliser this.$formkit.setLocale() depuis le plugin Vue (meilleur pour l'API d'options).
• Rarement utilisé, mais utile pour modifier directement l'objet config racine.

Utiliser changeLocale

Vous pouvez changer la locale de tous les champs FormKit en utilisant le composable changeLocale. C'est la méthode préférée lorsqu'un changement global est nécessaire :

Utiliser setLocale

Lorsque vous utilisez l'API d'options de Vue, vous avez accès à this.$formkit qui contient setLocale('de') — une méthode conçue spécifiquement pour changer globalement la locale actuelle :

Utiliser config racine

Lorsque vous utilisez l'API de composition, vous n'aurez pas accès à this.$formkit. Au lieu de cela, vous pouvez récupérer et modifier l'objet de configuration racine de FormKit. Celui-ci est mis à disposition globalement via le mécanisme inject de Vue et un Symbol unique :

Surcharge

Si vous trouvez qu'une phrase dans votre locale n'est pas formulée comme vous le préférez, vous pouvez remplacer ces messages individuellement globalement dans votre configuration. Vous pouvez le faire en fournissant un objet messages à la 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: '🚀 Lancer',
        },
      },
    },
  })
)

Ajouter votre langue

Écrire une locale pour une langue que vous connaissez est un excellent moyen de contribuer à FormKit et une façon facile de commencer avec l'open source également ! Nous sommes toujours impatients de voir des pull requests pour de nouvelles locales. Pour soutenir cet effort, nous avons créé un constructeur de locale — une petite application web pour rendre le processus de traduction aussi simple que possible.

Bien sûr, vous n'êtes pas obligé d'utiliser notre constructeur de locale pour soumettre une langue, et vous êtes plus que bienvenu pour soumettre une pull request standard avec votre locale incluse.