Vue Formulate

# Internationalization

Vue Formulate ships with the english language validation messages pre-installed, but the Vue community is great, and new translations continue to be submitted. These localizations are collected in the @braid/vue-formulate-i18n package.

# Supported languages

Vue Formulate currently supports these languages:

Locales

The flags in the following list indicate the country of origin for that translation. Language locales are also supported, for example 🇺🇸 en-US vs 🇬🇧 en-GB. If you’d like your locale represented, please submit a PR following the contribution guide.

  • 🇪🇬 Arabic (ar)
  • Catalan (ca)
  • 🇨🇳 Chinese (zh)
  • 🇨🇿 Czech (cs)
  • 🇩🇰 Danish (da)
  • 🇳🇱 Dutch (nl)
  • 🇩🇪 German (de)
  • 🇺🇸 English (en)
  • 🇫🇷 French (fr)
  • 🇮🇱 Hebrew (he)
  • 🇭🇺 Hungarian (hu)
  • 🇮🇹 Italian (it)
  • 🇯🇵 Japanese (ja)
  • 🇰🇷 Korean (ko)
  • 🇱🇹 Lithuanian (lt)
  • 🇳🇴 Norwegian (nb)
  • 🇵🇱 Polish (pl)
  • 🇧🇷 Portuguese (pt)
  • 🇷🇺 Russian (ru)
  • 🇷🇸 Serbian (sr)
  • 🇸🇰 Slovak (sk)
  • 🇨🇺 Spanish (es)
  • 🇹🇭 Thai (th)
  • 🇹🇷 Turkish (tr)
  • 🇻🇳 Vietnamese (vi)
  • 🇸🇪 Swedish (sv)

When using a right-to-left language like Arabic with the default snow theme it may be necessary to modify the direction css property in your project.

Thanks to all of the locale contributors!

💪 Add your language

Vue Formulate needs your help! Help others who speak your language or localization (en-US) by contributing a new locale!

# Registering a locale

You can register translations just like you would any other Vue Formulate plugin.

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
import { de } from '@braid/vue-formulate-i18n'

Vue.use(VueFormulate,  {
  plugins: [ de ]
})

If your site needs to support many languages, you can register them all at the same time.

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
import { de, da, fr } from '@braid/vue-formulate-i18n'

Vue.use(VueFormulate,  {
  plugins: [ de, da, fr ]
})

# Setting the active locale

# Explicitly setting the locale

You can explicitly set the locale in the options where you install Vue. Doing this ensures this is the only locale that will be used on the site.

Vue.use(VueFormulate,  {
  plugins: [ de ],
  locale: 'de'
})

Using a CDN

When importing your locale from a CDN via the .min.js file, you must use the .default property. See this example: https://codepen.io/team/braid/pen/ExZaQYr

# vue-i18n

If your site already uses vue-i18n (opens new window) you can leave the locale option blank and it will attempt to use the locale that is currently configured in vue-i18n.

← Contributing →