Internationalization

Site Level i18n Config

To leverage multi-language support in VuePress, you first need to use the following file 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 .vuepress/config.js:

  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', // this will be set as the lang attribute on <html>
  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 title or description VuePress will fallback to the root level values. You can omit the root level title and description as long as they are provided in each locale.

Default Theme i18n Config

The default theme also has built-in i18n support via themeConfig.locales, using the same { path: config } format. Each locale can have its own nav and sidebar config, in addition to a few other text values used across the site:

  1. module.exports = {
  2.   locales: { /* ... */ },
  3.   themeConfig: {
  4.     locales: {
  5.       '/': {
  6.         // text for the language dropdown
  7.         selectText: 'Languages',
  8.         // label for this locale in the language dropdown
  9.         label: 'English',
  10.         // text for the edit-on-github link
  11.         editLinkText: 'Edit this page on GitHub',
  12.         // algolia docsearch options for current locale
  13.         algolia: {},
  14.         nav: [
  15.           { text: 'Nested', link: '/nested/' }
  16.         ],
  17.         sidebar: {
  18.           '/': [/* ... */],
  19.           '/nested/': [/* ... */]
  20.         }
  21.       },
  22.       '/zh/': {
  23.         selectText: '选择语言',
  24.         label: '简体中文',
  25.         editLinkText: '在 GitHub 上编辑此页',
  26.         nav: [
  27.           { text: '嵌套', link: '/zh/nested/' }
  28.         ],
  29.         algolia: {},
  30.         sidebar: {
  31.           '/zh/': [/* ... */],
  32.           '/zh/nested/': [/* ... */]
  33.         }
  34.       }
  35.     }
  36.   }
  37. }