Internationalization

Vue Business Kit components are in English by default, and support multiple languages.

Global Configuration

Vue Business Kit provides two ways to configure internationalization.

Full Import

If you use full import, you need to pass the locale configuration when registering the plugin:

import { createApp } from "vue"
import VueBusinessKit, { zhCn } from "vue-business-kit"
import "vue-business-kit/dist/index.css"
import App from "./App.vue"

const app = createApp(App)
app.use(VueBusinessKit, {
  locale: zhCn
})
app.mount("#app")

On-demand Import

If you use on-demand import, you need to use the ElConfigProvider component to configure internationalization:

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script setup>
import { ElConfigProvider } from "element-plus"
import { zhCn } from "vue-business-kit"

const locale = zhCn
</script>

Supported Languages

Vue Business Kit has the following built-in language packs:

Language	Filename
English	en
Simplified Chinese	zh-cn

Using Other Languages

If you need to use other languages, you can refer to the format of existing language packs to customize your own.

Language Pack Format

import zhCn from "element-plus/es/locale/lang/zh-cn"

export default {
  ...zhCn, // Inherit Element Plus language pack
  bk: {
    table: {
      refresh: "Refresh",
      export: "Export",
      search: "Search",
      column: "Column"
    }
  }
}

Using Custom Language Pack

import { createApp } from "vue"
import VueBusinessKit from "vue-business-kit"
import customLocale from "./locale/custom"
import App from "./App.vue"

const app = createApp(App)
app.use(VueBusinessKit, {
  locale: customLocale
})
app.mount("#app")

Dynamic Language Switching

You can use the useLocale composable to dynamically switch languages:

<template>
  <el-button @click="toggleLocale">Toggle Language</el-button>
</template>

<script setup>
import { ref } from "vue"
import { useLocale, en, zhCn } from "vue-business-kit"

const locale = useLocale()
const currentLang = ref("zh-cn")

const toggleLocale = () => {
  if (currentLang.value === "zh-cn") {
    locale.value = en
    currentLang.value = "en"
  } else {
    locale.value = zhCn
    currentLang.value = "zh-cn"
  }
}
</script>