FormKit ships with internationalization support for all of its interfaces and validation messages.
Currently, FormKit supports the following languages (in the @formkit/i18n
package):
Although flags are poor representations of languages (flags indicate a geographic nation, while languages can be spoken in many ares of the world), we use the flags in the list above to indicate the location of the contributor who created that particular locale.
FormKitโs defaultConfig
includes the english locale by default โ to add an additional locale, import it from @formkit/i18n
and append it to the locales
option when you initialized the FormKit plugin. To set the active locale specify it with the locale
option:
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({ // Define additional locales locales: { de, fr, zh }, // Define the active locale locale: 'fr', }))app.mount('#app')
There are two ways to change your active locale:
this.$formkit.setLocale()
from the Vue plugin (best for options API).config
object (best for composition API).setLocale
When using Vueโs options API, you have access to this.$formkit
which contains setLocale('de')
โ a purpose-built method that globally changes the current locale:
config
When using the composition API, you wonโt have access to this.$formkit
. Instead, you can fetch and modify the root FormKit configuration object. This is made available globally via Vueโs inject
mechanism and a unique Symbol:
If you find a phrase in your locale isnโt worded the way you prefer, you can override those individual messages globally in your configuration. You can do this by providing a messages
object to the 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: '๐ Launch', }, }, }, }))
Messages are generally found under a localeโs ui
or validation
property. To see a full list of keys and messages checkout the english locale.
Writing a locale for a language you know is a great way to contribute to FormKit and an easy way to get started with open source too! We are always eager to see pull requests for new locales. To support this effort, weโve created a locale builder โ a small web app to make the translation process as easy as possible.
Of course, you are not required to use our locale builder to submit a language, and are more than welcome to submit a standard pull request with your locale included.
If your language is already on the list (let's say English), but your locality speaks a variation of that language (like ๐ฌ๐ง en-GB
), please feel free to submit your localized language.