Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
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 three ways to change your active locale:
changeLocale
to globally change the locale.this.$formkit.setLocale()
from the Vue plugin (best for options API).config
object.changeLocale
You can change the locale of all FormKit inputs by using the changeLocale
composable. This is the preferred method when a global change is needed:
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.