I18n

Setting Language important

You need to set the lang option for each language. Even if you are only using a single language, you must set lang in .vuepress/config.{js,ts}.

Why setting it?

To provide the correct locale text, the theme needs to know which language every directory is using.

TS Single Language

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  // Set language you are using
  lang: "en-US",
});

JS Single Language

// .vuepress/config.js
export default {
  // Set language you are using
  lang: "en-US",
};

TS Multi Language

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  locales: {
    "/": {
      // Set language you are using
      lang: "en-US",
    },
    "/zh/": {
      // Set language you are using
      lang: "zh-CN",
    },
  },
});

JS Multi Language

// .vuepress/config.js
export default {
  locales: {
    "/": {
      // Set language you are using
      lang: "en-US",
    },
    "/zh/": {
      // Set language you are using
      lang: "zh-CN",
    },
  },
};

Internationalization

locales is an object whose key is the path prefix of each language, and value is the configuration of this language. The value object can include title, description, lang, etc.

Info

For details of multiple languages, please see Official Document

You should set the lang option for each language so that themes and plugins can handle them correctly.

If the locales objects only contain the "/" key, the theme will not display the language dropdown menu. When you set multiple keys through locales (when there are multiple languages), we will display a language dropdown menu in navbar.

Supported Languages

• Simplified Chinese (zh-CN)
• Traditional Chinese (zh-TW)
• English (United States) (en-US)
• German (de-DE)
• German (Australia) (de-AT)
• Russian (ru-RU)
• Ukrainian (uk-UA)
• Vietnamese (vi-VN)
• Portuguese (Brazil) (pt-BR)
• Polish (pl-PL)
• French (fr-FR)
• Spanish (es-ES)
• Slovak (sk-SK)
• Japanese (ja-JP)
• Turkish (tr-TR)
• Korean (ko-KR)
• Finnish (fi-FI)
• Indonesian (id-ID)
• Dutch (nl-NL)

Note

If you need multi-language support for other languages, you can set locales for theme and plugins, this also gives you the ability to customize built-in locales. For details, see Theme I18n Options.

Also submit a PR to all files named locale.ts or under locale folder in this repo is welcomed.

Setting Options for Each Language

Like the Site Config and Theme Config of @vuepress/theme-default, vuepress-theme-hope also supports you to set a locale option in theme options, and set different config for each language.

TS

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  locales: {
    "/": {
      lang: "en-US",
    },
    "/zh/": {
      lang: "zh-CN",
    },
  },

  theme: hopeTheme({
    // common config
    // ...
    locales: {
      "/": {
        // config for English
        // ...
      },
      "/zh/": {
        // config for Chinese
        // ...
      },
    },
  }),
});

JS

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

export default {
  locales: {
    "/": {
      lang: "en-US",
    },
    "/zh/": {
      lang: "zh-CN",
    },
  },

  theme: hopeTheme({
    // common config
    // ...
    locales: {
      "/": {
        // config for English
        // ...
      },
      "/zh/": {
        // config for Chinese
        // ...
      },
    },
  }),
};