Locales ​

Locales configuration options.

Locale 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:

// builder.config.js

import { defineConfig } from '@vueform/builder'

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

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):

// builder.config.js

import { defineConfig } from '@vueform/builder'

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

// builder.config.js

import { defineConfig } from '@vueform/builder'

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