Internationalization

Site Level i18n Config

To take advantage of 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, along with some 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.         // Aria Label for locale in the dropdown
  11.         ariaLabel: 'Languages',
  12.         // text for the edit-on-github link
  13.         editLinkText: 'Edit this page on GitHub',
  14.         // config for Service Worker
  15.         serviceWorker: {
  16.           updatePopup: {
  17.             message: "New content is available.",
  18.             buttonText: "Refresh"
  19.           }
  20.         },
  21.         // algolia docsearch options for current locale
  22.         algolia: {},
  23.         nav: [
  24.           { text: 'Nested', link: '/nested/' , ariaLabel: 'Nested' }
  25.         ],
  26.         sidebar: {
  27.           '/': [/* ... */],
  28.           '/nested/': [/* ... */]
  29.         }
  30.       },
  31.       '/zh/': {
  32.         selectText: '选择语言',
  33.         label: '简体中文',
  34.         editLinkText: '在 GitHub 上编辑此页',
  35.         serviceWorker: {
  36.           updatePopup: {
  37.             message: "发现新内容可用.",
  38.             buttonText: "刷新"
  39.           }
  40.         },
  41.         nav: [
  42.           { text: '嵌套', link: '/zh/nested/' }
  43.         ],
  44.         algolia: {},
  45.         sidebar: {
  46.           '/zh/': [/* ... */],
  47.           '/zh/nested/': [/* ... */]
  48.         }
  49.       }
  50.     }
  51.   }
  52. }