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.i18n.locale = 'de'
Locale can be changed at mounted
hook or before. Changing it after won't have an effect until Vueform components aren't refreshed. This can be dynamically done by adding the locale as key
to each Vueform component, eg: <Vueform :key="locale">
.
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:
Input | Example | Description |
---|---|---|
Year | ||
YYYY | 2014 | 4 or 2 digit year. Note: Only 4 digit can be parsed on strict mode |
YY | 14 | 2 digit year |
Y | -25 | Year with any number of digits and sign |
Q | 1..4 | Quarter of year. Sets month to first month in quarter. |
Month | ||
M MM | 1..12 | Month number |
MMM MMMM | Jan..December | Month name in locale set by moment.locale() |
Week | ||
gggg | 2014 | Locale 4 digit week year |
gg | 14 | Locale 2 digit week year |
w ww | 1..53 | Locale week of year |
e | 0..6 | Locale day of week |
ddd dddd | Mon...Sunday | Day name in locale set by moment.locale() |
GGGG | 2014 | ISO 4 digit week year |
GG | 14 | ISO 2 digit week year |
W WW | 1..53 | ISO week of year |
E | 1..7 | ISO day of week |
Day | ||
D DD | 1..31 | Day of month |
Do | 1st..31st | Day of month with ordinal |
DDD DDDD | 1..365 | Day of year |
Time | ||
H HH | 0..23 | Hours (24 hour time) |
h hh | 1..12 | Hours (12 hour time used with a A.) |
k kk | 1..24 | Hours (24 hour time from 1 to 24) |
a A | am pm | Post or ante meridiem (Note the one character a p are also considered valid) |
m mm | 0..59 | Minutes |
s ss | 0..59 | Seconds |
S SS SSS ... SSSSSSSSS | 0..999999999 | Fractional seconds |
Timestamp | ||
X | 1410715640.579 | Unix timestamp |
x | 1410715640579 | Unix 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: