Internationalization

FormMaking V3 supports two languages (Chinese simplified zh-cn and English en). English is used by default. You can modify the formmaking V3 by using the following configuration:

app.use(FormMakingV3, {
  locale: 'zh-cn'
  // locale: 'en'
})

Used in Multilingual Projects

legacy

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: true,
  messages: {
    'en': {},
    'zh-cn': {}
  }
})

app.use(FormMakingV3, {
  locale: 'en',
  i18n // The configured i18n needs to be passed into the component
})
app.use(i18n)

Composition API

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  globalInjection: true, // It is available in all components $i18n $t $rt $d $n $tm
})

app.use(FormMakingV3, {locale: 'zh-cn', i18n})
app.use(i18n)

TIP

FormMakingV3 uses the legacy mode. It need to set as globalInjection: true

<template>
  <a href="/">{{t('home')}}</a>

  <select v-model="locale">
    <option value="en">en</option>
    <option value="zh-cn">zh-cn</option>
  </select>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
  
const { t, locale } = useI18n({
  locale: 'zh-cn',
  useScope: 'global',
  messages: {
    en: {
      home: 'Home'
    },
    'zh-cn': {
      home: '首页'
    }
  }
})

locale.value = 'en' // Dynamic language switching
</script>