Locales

Locales configuration options.

Locale Configuration Options

Vueform Builder allows element properties to be localized in multiple languages. You can enable this feature by defining the available locales in builder.config.js:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  locales: {  // default `{}`
    en: 'English',
    de: 'German',
    // Add more locales here
  }
})

Once locales are enabled, a language selector will appear next to the config panel, and fields that support localization will show the locale's ISO code:

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

Setting Default and Fallback Locale

You can set a default and fallback locale in your configuration:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  locales: {
    en: 'English',
    de: 'German',
  },
  defaultLocale: 'en',  // default is 'en'
  fallbackLocale: 'en', // default is 'en'
})

Disabling Emoji Flags

By default, emoji flags are used for locale selection. To disable emoji flags and display ISO codes instead, you can configure the following:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  emojiFlags: false, // default is `true`
})

You can further customize the appearance of ISO codes using CSS with the .vfb-flag-{ISO} classes.

If you've already created a form with localized properties and later disable localization, make sure to convert those properties back to plain text before reloading the form into the builder.

Localizing the Builder

The Vueform Builder itself can be localized using the builderLocales property in builder.config.js:

js
// builder.config.js

import { defineConfig, nl_NL, ja_JP } from '@vueform/builder'

export default defineConfig({
  builderLocales: {
    nl_NL,
    ja_JP,
  },
})

The en_US locale is included by default. You only need to include other locales that you wish to use.

Currently, the builder supports the following locales:

  • en_US - English 🇺🇸
  • hu_HU - Hungarian 🇭🇺
  • ja_JP - Japanese 🇯🇵
  • nl_NL - Dutch 🇳🇱
  • sv_SE - Swedish 🇸🇪

To set the default builder locale, use the builderLocale property:

js
// builder.config.js

import { defineConfig, nl_NL, ja_JP } from '@vueform/builder'

export default defineConfig({
  builderLocale: 'nl_NL',
  builderLocales: {
    nl_NL,
    ja_JP,
  },
})

If you want to change the default fallback locale, use the builderFallbackLocale property:

js
// builder.config.js

import { defineConfig, nl_NL, ja_JP } from '@vueform/builder'

export default defineConfig({
  builderLocale: 'nl_NL',
  builderFallbackLocale: 'nl_NL',
  builderLocales: {
    nl_NL,
    ja_JP,
  },
})

Importing Locales for Vueform

Using builderLocales only localizes the builder interface. For a fully localized experience (including validator messages and country lists), include the relevant locales for Vueform itself in vueform.config.js:

js
// vueform.config.js

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

export default defineConfig({
  locale: 'nl',
  fallbackLocale: 'nl',
  locales: {
    en,
    nl,
    ja,
  },
})

Vueform may use different locale keys (e.g., ja instead of ja_JP). Check available Vueform locales here.

Switching Builder Locales

To change the builder's locale at runtime, use the :builder-locale property on the <VueformBuilder> component:

vue
<template>
  <VueformBuilder
    :builder-locale="builderLocale"
  />
</template>

<script setup>
import { ref } from 'vue'

const builderLocale = ref('nl_NL')

const changeLocale = (locale) => {
  builderLocale.value = locale
}
</script>

Alternatively, you can use the setBuilderLocale() method of the builder instance:

vue
<template>
  <VueformBuilder
    ref="builder$"
  />
</template>

<script setup>
import { ref } from 'vue'

const builder$ = ref(null)

const changeLocale = (locale) => {
  builder$.value.setBuilderLocale(locale)
}
</script>
👋 Hire Vueform team for form customizations and developmentLearn more