i18n

CodeLayout supports multiple languages for internal strings, Chinese and English are supported, and you can specify the language in the langConfiguration attribute of the CodeLayout component.

<template>
  <CodeLayout 
    ref="codeLayout"
    :langConfig="langConfig"
    style="height: 400px"
  />
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { CodeLayoutLangConfig } from 'vue-code-layout';

const langConfig = reactive<CodeLayoutLangConfig>({
  lang: 'zh',
});
</script>

Overwrite language text

If a string in the language does not meet your requirements, you can overwrite it in langConfig.

const langConfig = reactive<CodeLayoutLangConfig>({
  lang: 'zh',
  stringsOverride: {
    togglePanel: '切换面板',
  },
});

Add language

Currently, Chinese and English are supported, but you can add languages through the interface. You should call addCodeLayoutLang before creating the CodeLayout component.

import { addCodeLayoutLang } from 'vue-code-layout';

addCodeLayoutLang('zh', {
  customizeLayout: '自定义布局',
  togglePanel: '切换面板',
  //省略...
});

The complete list of languages can be viewed in the library\Language\en.ts