GenuiConfigProvider - Internationalization

GenuiConfigProvider supports i18n via the locale prop and custom messages via the i18n prop.

Dynamic Language Switching

Switch language with a reactive variable:

<template>
  <div>
    <select v-model="locale">
      <option value="zh_CN">简体中文</option>
      <option value="en_US">English</option>
    </select>
    <GenuiConfigProvider :locale="locale" :i18n="customI18n">
      <GenuiChat :url="url" />
    </GenuiConfigProvider>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GenuiConfigProvider, GenuiChat } from '@opentiny/genui-sdk-vue';

const locale = ref('zh_CN');
const customI18n = {
  // ... custom messages
};
</script>

Custom Messages

Use i18n to override or extend default strings. Keys are language codes; values are message objects for that locale.

<template>
  <GenuiConfigProvider :locale="locale" :i18n="customI18n">
    <GenuiChat :url="url" />
  </GenuiConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GenuiConfigProvider, GenuiChat } from '@opentiny/genui-sdk-vue';
import type { I18nMessages } from '@opentiny/genui-sdk-vue';

const locale = ref('zh_CN');

const customI18n: I18nMessages = {
  zh_CN: {
    placeholder: {
      input: '请输入您的问题（自定义）',
    },
    footer: {
      aiGenerated: '内容由AI生成，仅供参考（已自定义）',
    },
  },
  en_US: {
    placeholder: {
      input: 'Please enter your question (customized)',
    },
    footer: {
      aiGenerated: 'Content generated by AI, for reference only (customized)',
    },
  },
};
</script>

Full Message Catalog

To customize more strings, inspect the full message catalog:

import { useI18n } from '@opentiny/genui-sdk-vue';

const i18n = useI18n();

console.log(i18n.messages)

Full Example