Internationalization

The i18n configuration allows you to customize the internationalization settings for StreamMarkdown. You can configure the locale either by using a built-in language code or by providing a custom locale configuration object.

locale

• Type: string | LocaleConfig
• Default: 'en-US'

Locale configuration for internationalization. Can be a locale string (language code) or a custom locale configuration object.

Supported Languages

The library supports the following built-in languages:

• 'en-US' - English - Default
• 'zh-CN' - Chinese (Simplified)

Using Built-in Languages

You can use a language code string to select a built-in language:

<script setup lang="ts">
import { Markdown } from 'vue-stream-markdown'

const content = '# Hello World'
</script>

<template>
  <!-- Use English -->
  <Markdown :content="content" locale="en-US" />

  <!-- Use Chinese -->
  <Markdown :content="content" locale="zh-CN" />
</template>

Custom Locale Configuration

You can provide a custom locale configuration object to override or extend the default translations. See the LocaleConfig Structure section below for the complete interface definition:

<script setup lang="ts">
import type { LocaleConfig } from 'vue-stream-markdown'
import { Markdown } from 'vue-stream-markdown'

const customLocale: LocaleConfig = {
  // ... all translations
}

const content = '# Hello World'
</script>

<template>
  <Markdown :content="content" :locale="customLocale" />
</template>

LocaleConfig Structure

The LocaleConfig interface defines the structure of locale configuration:

interface LocaleConfig {
  button: {
    zoomIn: string
    zoomOut: string
    resetZoom: string
    preview: string
    source: string
    collapse: string
    copy: string
    download: string
    minimize: string
    maximize: string
  }
  error: {
    vanilla: string
    image: string
    mermaid: string
    katex: string
    harden: string
  }
}

Using I18n in Custom Components

If you're creating custom node renderers or components, you can use the useI18n composable to access translations:

<script setup lang="ts">
import { useI18n } from 'vue-stream-markdown'

const { t } = useI18n()

// Access translations using dot notation
const copyText = t('button.copy')
const errorText = t('error.image')
</script>

<template>
  <button>{{ copyText }}</button>
</template>

Translation Key Format

Translation keys use dot notation to access nested properties. If a translation key doesn't exist, the key itself will be returned as a fallback.

Complete Example

Here's a complete example showing how to use i18n with dynamic locale switching:

<script setup lang="ts">
import { ref } from 'vue'
import { Markdown } from 'vue-stream-markdown'

const content = '# Hello World\n\nThis is a markdown example.'
const locale = ref<'en-US' | 'zh-CN'>('en-US')

function toggleLocale() {
  locale.value = locale.value === 'en-US' ? 'zh-CN' : 'en-US'
}
</script>

<template>
  <div>
    <button @click="toggleLocale">
      Switch to {{ locale === 'en-US' ? '中文' : 'English' }}
    </button>
    <Markdown :content="content" :locale="locale" />
  </div>
</template>

Default Locale Files

The library includes default locale files for supported languages:

• src/locales/en-US.json - English translations
• src/locales/zh-CN.json - Chinese translations

These files are automatically loaded when you use the corresponding language code. If you need to add support for additional languages, you can create new locale JSON files following the same structure.