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 { defineConfig } from '@vueform/vueform'
import en from '@vueform/vueform/locales/en'

export default defineConfig({
  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 { defineConfig } from '@vueform/vueform'
import en from '@vueform/vueform/locales/en'

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

export default defineConfig({
  locales: { en },
  // ...
})

If we'd like replace a whole locale file we can copy ./node_modules/@vueform/vueform/locales/en/index.mjs 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 { defineConfig } from '@vueform/vueform'
import en from './vueform/locales/en'

export default defineConfig({
  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'
})

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

// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import en from '@vueform/vueform/locales/en'
import de from '@vueform/vueform/locales/de'
import nl from '@vueform/vueform/locales/nl'

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

Switching Locale Using Options API ​

We can switch locale anywhere in our application using the global this.$vueform.i18n.locale object in Options API:

mounted() {
  this.$vueform.i18n.locale = 'de'
}

Switching Locale Using Composition API ​

From version 1.3.1 we can inject the global $vueform object in any setup() method and override the locale there using Composition API:

setup() {
  const $vueform = inject('$vueform')

  $vueform.value.i18n.locale = 'de'
}

Switching Locale Before Version 1.3.1 ​

Before @vueform/vueform@1.3.1 you needed to add the locale as key to each Vueform component upon switching locale, eg: <Vueform :key="locale">.

Adding Locale ​

To create a new locale copy ./node_modules/@vueform/vueform/locales/zh_TW/index.mjs 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 { defineConfig } from '@vueform/vueform'
import en from '@vueform/vueform/locales/en'
import zh_HK from './vueform/locales/zh_HK'

export default defineConfig({
  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 Element Properties ​

Certain element options can be provided in multiple locales and the one that matches the current locale will be used.

Let's take label as an example:

const schema = ref({
  birthday: {
    type: 'date',
    label: {
      en: 'Birthday',
      de: 'Geburtstag',
    },
  }
})

As we can see the label is provided as an object with en and de keys. This means that if Vueform's locale is English then Birthday will be used, and if it's German then Geburtstag will be used.

Options that can be localized are indicated in their component reference by "Localizable: true" like label for DateElement.

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.mjs:

// @vueform/vueform/locales/en/index.mjs

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:

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:

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

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

import { defineConfig } from '@vueform/vueform'

export default defineConfig({
  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:

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

Vueform has the following translatable elements:

• TTextElement
• TTextareaElement
• TEditorElement