Internationalization

Vue Lite Layer has built-in i18n support, providing Chinese (zh-CN) and English (en) by default.

Built-in Languages

Chinese (zh-CN) — Default

Key	Text
VueLiteLayer.close	关闭
VueLiteLayer.maximum	最大化
VueLiteLayer.restore	还原
VueLiteLayer.minimum	最小化
VueLiteLayer.loading	加载中
VueLiteLayer.ok	确认
VueLiteLayer.cancel	取消

English (en)

Key	Text
VueLiteLayer.close	close
VueLiteLayer.maximum	maximum
VueLiteLayer.restore	restore
VueLiteLayer.minimum	minimum
VueLiteLayer.loading	loading
VueLiteLayer.ok	ok
VueLiteLayer.cancel	cancel

Switch Language

Global Setting

Set the default language when registering the plugin via the i18n option:

import { createApp } from 'vue'
import VueLiteLayer from 'vue-lite-layer'

const app = createApp(App)
app.use(VueLiteLayer, {
  i18n: { locale: 'en' }
})

Per-layer Setting

You can specify a different language for individual layers:

const { openLayer } = useLiteLayer()

openLayer({
  title: 'English Layer',
  content: MyComponent,
  i18n: { locale: 'en' }
}, appContext)

Custom Language Packs

You can extend or override language text via i18n.messages:

Override Built-in Text

app.use(VueLiteLayer, {
  i18n: {
    locale: 'zh-CN',
    messages: {
      'zh-CN': {
        VueLiteLayer: {
          ok: '提交',
          cancel: '返回',
          close: '关闭窗口',
          loading: '请稍候...',
        }
      }
    }
  }
})

Add a New Language

app.use(VueLiteLayer, {
  i18n: {
    locale: 'ja',
    messages: {
      ja: {
        VueLiteLayer: {
          close: '閉じる',
          maximum: '最大化',
          restore: '復元',
          minimum: '最小化',
          loading: '読み込み中',
          ok: '確認',
          cancel: 'キャンセル'
        }
      }
    }
  }
})

Usage in Nuxt

Configure i18n in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['vue-lite-layer/nuxt'],
  vueLiteLayer: {
    i18n: {
      locale: 'en',
      messages: {
        en: {
          VueLiteLayer: {
            ok: 'Confirm',
            cancel: 'Cancel',
          }
        }
      }
    }
  }
})

Technical Implementation

Vue Lite Layer uses vue-i18n-lite as the i18n engine. Each layer instance independently initializes its own i18n instance. Language pack merge priority:

1. i18n.messages passed in openLayer()
2. i18n.messages passed in app.use()
3. Built-in language packs (zh-CN / en)

Third-party Components (Element Plus)

When a Layer is opened through useLiteLayer().openLayer(), it automatically inherits the caller component tree's provide values. Therefore, if the caller is under an ancestor <ElConfigProvider :locale="...">, Element Plus components in the Layer, including DatePicker, use the same locale by default and react to its changes. No locale configuration is needed on lite-layer or the Layer content.

Direct $layer.open() calls only inherit application-level provides from the supplied appContext. If the locale comes from a component-scoped ElConfigProvider, open the Layer through useLiteLayer().openLayer() inside that component tree.

If application code configures Day.js globally, synchronize dayjs.locale(...) separately.