I18n

Site I18n Config

To take advantage of multi-language support in VuePress, you first need to use the following file and directory structure:

  1. docs
  2. ├─ README.md
  3. ├─ foo.md
  4. ├─ nested
  5. │  └─ README.md
  6. └─ zh
  7.    ├─ README.md
  8.    ├─ foo.md
  9.    └─ nested
  10.       └─ README.md

Then, specify the locales option in your config file:

  1. module.exports = {
  2.   locales: {
  3.     // The key is the path for the locale to be nested under.
  4.     // As a special case, the default locale can use '/' as its path.
  5.     '/': {
  6.       lang: 'en-US',
  7.       title: 'VuePress',
  8.       description: 'Vue-powered Static Site Generator',
  9.     },
  10.     '/zh/': {
  11.       lang: 'zh-CN',
  12.       title: 'VuePress',
  13.       description: 'Vue 驱动的静态网站生成器',
  14.     },
  15.   },
  16. }

If a locale does not have a lang, title, description or head, VuePress will fallback to the root-level values. You can omit the root level config as long as they are provided in each locale.

TIP

Config reference: locales

Theme I18n Config

VuePress does not restrict how themes provide multi-language support, so each theme may have different way to handle i18n, and some themes may not provide multi-language support at all. You’d better refer to the theme documentation for detailed guide.

If you are using default theme, the multi-language support is the same as above:

  1. module.exports = {
  2.   themeConfig: {
  3.     locales: {
  4.       '/': {
  5.         selectLanguageName: 'English',
  6.       },
  7.       '/zh/': {
  8.         selectLanguageName: '简体中文',
  9.       },
  10.     },
  11.   },
  12. }

TIP

Config reference: Default Theme > locales