Locales ​

Locales configuration options.

Certain element properties can be provided in multiple locales. We can enable this feature by defining the list of available locales in builder.config.js:

js
// builder.config.js

export default {
  locales: {  // default `{}`
    en: 'English',
    de: 'German',
    // ...
  }
}

When locales are enabled a language selector will appear next to the config panel and the fields which can be localized will have the locale's ISO code on their right:

Locales

The following properties can be localized:

  • Properties
    • label
    • tooltip
    • placeholder
    • floating
    • description
  • Options
    • text (checkbox, radio, toggle)
    • on & off label (toggle)
    • no options text & no results text (select, multiselect, tags)
  • Data
    • data source / list / option labels (checkbox group, radio group, select, multiselect, tags)
    • default (text, textarea, editor, hidden)
  • Decorators
    • prefix
    • suffix
    • before
    • between
    • after

We can set the default and fallback locale in our config (they both default to en):

js
// builder.config.js

export default {
  locales: {
    en: 'English',
    de: 'German',
    // ...
  },
  defaultLocale: 'en', // default 'en'
  fallbackLocale: 'en', // default 'en'
}

The flags are rendered using emojies which are available on most devices without having to add extra resources. This can be disabled:

js
// builder.config.js

export default {
  // ...
  emojiFlags: false, // default `true`
}

When emoji flags are disabled ISO codes will appear instead of flags. They can be further customized with CSS with .vfb-flag-{ISO} classes.

If you've created a form with localized properties and then you disable the localization feature, make sure to convert back localized properties to plain before loading it back to the builder.

đŸ‘‹ Hire Vueform team for form customizations and developmentLearn more