I18n (internationalization)

Learn how to internationalize everything including the contents of your forms.

Using Locales

Vueform comes with a built-in translation engine that handles different locales.

We can import locales from @vueform/vueform/locales directory, which we can add in vueform.config.js:

// vueform.config.js

import en from '@vueform/vueform/locales/en'

export default {
  locale: 'en',
  locales: { en },
  // ...
}

We also need to set the locale that should be used by default with locale option.

Customizing Locale

To add or replace tags in a local, simply override its value in the locale object. For example here's how we can replace the label of list's add button:

// vueform.config.js

import en from '@vueform/vueform/locales/en'

en.vueform.elements.list.add = 'Add item'

export default {
  locales: { en },
  // ...
}

If we'd like replace a whole locale file we can copy ./node_modules/@vueform/vueform/locales/en/index.js to our project folder, eg. ./vueform/locales/en.js.

We can use the custom version after by including that one instead of the official:

// vueform.config.js

import en from './vueform/locales/en'

export default {
  locales: { en },
  locale: 'en',
  // ...
}

Switching Locale

To switch a locale we can pass a locale option to Vueform upon installation:

import Vue from 'vue'
import Vueform from '@vueform/vueform'
import vueformConfig from './../vueform.config'

Vue.use(Vueform, { ...vueformConfig, locale: 'de' })

We can also switch locale later using the $vueform.locale global object:

this.$vueform.locale = 'de'

To use a locale you need to include it first in vueform.config.js's locales object:

// vueform.config.js

import en from '@vueform/vueform/locales/en'
import de from '@vueform/vueform/locales/de'
import nl from '@vueform/vueform/locales/nl'

export default {
  locale: 'en',
  locales: {
    en,
    nl,
    de,
  },
  // ...
}

The $vuform object contains Vueform's configuration and it is injected into each component. Changes made to it will have a global effect.

Adding Locale

To create a new locale copy ./node_modules/@vueform/vueform/locales/en/index.js to your project folder, eg. ./vueform/locales/zh_HK.js.

After the translation tags have been translated we can add it in vueform.config.js:

// vueform.config.js

import en from '@vueform/vueform/locales/en'
import zh_HK from './vueform/locales/zh_HK'

export default {
  locale: 'en',
  locales: {
    en,
    zh_HK
  },
  // ...
}

Available Locales

Vueform is currently available in 19 languages:

  • zh_CN - Chinese (Simplified) 🇨🇳
  • zh_TW - Chinese (Traditional) 🇨🇳
  • da - Danish 🇩🇰
  • nl - Dutch 🇳🇱
  • en - English 🇺🇸
  • fr_CA - French (Canada) 🇫🇷 🇨🇦
  • de - German 🇩🇪
  • el - Greek 🇬🇷
  • hu - Hungarian 🇭🇺
  • id - Indonesian 🇮🇩
  • it - Italian 🇮🇹
  • ja - Japanese 🇯🇵
  • pt - Portuguese 🇵🇹
  • pt_BR - Portuguese (Brazil) 🇧🇷
  • ru - Russian 🇷🇺
  • sk - Slovak 🇸🇰
  • es - Spanish 🇪🇸
  • tr - Turkish 🇹🇷
  • uk - Ukrainian 🇺🇦

Translating Dates

When we use DateElement or DatesElement we rely upon the locale to determine date format.

In the locale file look for vueform.dateFormats object which contains different variations of date formatting tags depending on what parts of a date our element displays.

Here's the default configuration from @vueform/vueform/locales/en/index.js:

// @vueform/vueform/locales/en/index.js

export default {
  vueform: {
    // ...
    dateFormats: {
      // date: true, time: true, seconds: true, hour24: true
      datetimeSeconds24: 'YYYY-MM-DD HH:mm:ss', 

      // date: true, time: true, seconds: true, hour24: false
      datetimeSeconds12: 'YYYY-MM-DD hh:mm:ss a',

      // date: true, time: true, seconds: false, hour24: true
      datetime24: 'YYYY-MM-DD HH:mm',

      // date: true, time: true, seconds: false, hour24: false
      datetime12: 'YYYY-MM-DD hh:mm a',

      // date: false, time: true, seconds: true, hour24: true
      timeSeconds24: 'HH:mm:ss',

      // date: false, time: true, seconds: true, hour24: false
      timeSeconds12: 'hh:mm:ss a',

      // date: false, time: true, seconds: false, hour24: true
      time24: 'HH:mm',

      // date: false, time: true, seconds: false, hour24: false
      time12: 'hh:mm a',

      // date: true, time: false
      date: 'YYYY-MM-DD',
    },
    // ...
  },
  // ...
}

Date Formatting Tokens

Here are the list of formatting tags available, based on moment.js:

InputExampleDescription
Year
YYYY20144 or 2 digit year. Note: Only 4 digit can be parsed on strict mode
YY142 digit year
Y-25Year with any number of digits and sign
Q1..4Quarter of year. Sets month to first month in quarter.
Month
M MM1..12Month number
MMM MMMMJan..DecemberMonth name in locale set by moment.locale()
Week
gggg2014Locale 4 digit week year
gg14Locale 2 digit week year
w ww1..53Locale week of year
e0..6Locale day of week
ddd ddddMon...SundayDay name in locale set by moment.locale()
GGGG2014ISO 4 digit week year
GG14ISO 2 digit week year
W WW1..53ISO week of year
E1..7ISO day of week
Day
D DD1..31Day of month
Do1st..31stDay of month with ordinal
DDD DDDD1..365Day of year
Time
H HH0..23Hours (24 hour time)
h hh1..12Hours (12 hour time used with a A.)
k kk1..24Hours (24 hour time from 1 to 24)
a Aam pmPost or ante meridiem (Note the one character a p are also considered valid)
m mm0..59Minutes
s ss0..59Seconds
S SS SSS ... SSSSSSSSS0..999999999Fractional seconds
Timestamp
X1410715640.579Unix timestamp
x1410715640579Unix ms timestamp

Translating Elements

Elements that start with T or t- (eg. TTextElement or t-textarea-element) are translatable elements that can have multiple values in different languages.

For example:

<Vueform mulitlingual>
  <TTextElement name="title" placeholder="Title" />
  <TEditorElement name="description" placeholder="Description" />
</Vueform>

By enabling multilingual, the FormLanguages component will appear above the form, which allows us to choose the language of the translatable elements within the form.

Adding Languages

By default the languages and the initially selected langage are based on values defined in vueform.config.js:

// vueform.config.js

export default {
  languages: { // available languages
    en: 'English',
    zh: 'Chinese',
  },
  language: 'en' // initially selected language
}

We can customize languages and initial language on form level using languages and language option:

<Vueform mulitlingual language="zh" :languages="{
  en: 'English',
  zh: 'Chinese',
  nl: 'Dutch',
}">
  <TTextElement name="title" placeholder="Title" />
  <TEditorElement name="description" placeholder="Description" />
</Vueform>

Vueform has the following translatable elements: