URL-Based I18n Solution

To leverage multi-language support in Saber, you first need to use the following file structure in your pages folder:

├─ nested
│  └─
├─ cn
│  ├─
│  ├─
│  └─ nested
│     └─
└─ fr
   └─ nested

In this way, the cn (Chinese) version of your site is available under the path /cn, the fr (French) version of your site is available under the path /fr.

Then, specify the locales option in your saber-config.yml:

  lang: en
  title: My Site

      lang: zh
      title: 我的网站
      lang: fr
      title: Mon Site

The siteConfig.lang option is used to set the lang attribute for <html> element.

The locales option is used to override siteConfig and themeConfig for specific paths. For example, when you visit the homepage / or /about page, this.$siteConfig.title in your component will be My Site, while if you visit /cn or /cn/about, it will be 我的网站 instead.

Access Locale Path in the Component

Use this.$localePath in your component to find out the locale for current page, with the saber-config.yml we used above, this.$localePath will be '/fr' when you visit page /fr/about, or '/' when you visit /about.