how can i support i18n feature in nav bar ?

[shallingzhang]

i want to show chinese and english nav bar ,how can i support i18n feature in nav bar ?

[shallingzhang]

export default {
themeConfig: {
locales: {
en: {
nav: [
{ text: 'Guide', link: '/guide' },
{ text: 'Configs', link: '/configs' },
{ text: 'Changelog', link: 'https://github.com/...' }
]
}
}
}
}

[JohnUW42]

Hi!

I am trying to do the same thing.

I think I did the same as suggested above, but the nav is simply missing; it is not being rendered.

Would anyone please suggest what is necessary to achieve internationalisation of the nav bar.

Following is the code.

Thank you very much!

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: "My Awesome Project",
  description: "A VitePress Site",
  themeConfig: {
    locales: {
      root: {
        label: 'English',
        lang: 'en',
        nav: [
          { text: 'Home', link: '/' },
          { text: 'Examples', link: '/markdown-examples' }
        ],
        sidebar: [
          {
            text: 'Examples',
            items: [
              { text: 'Markdown Examples', link: '/markdown-examples' },
              { text: 'Runtime API Examples', link: '/api-examples' }
            ]
          }
        ]
      },
      lv: {
        label: 'Latviešu',
        lang: 'lv',
        nav: [
          { text: 'Sākums', link: '/' },
          { text: 'Piemēri', link: '/markdown-examples' }
        ],
        sidebar: [
          {
            text: 'Examples',
            items: [
              { text: 'Markdown Examples', link: '/markdown-examples' },
              { text: 'Runtime API Examples', link: '/api-examples' }
            ]
          }
        ]
    }
  },
  }
})

[brc-dd]

Do it like this. That other answer is of outdated syntax.

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Awesome Project',
  description: 'A VitePress Site',

  // Shared theme config (used across all locales)
  themeConfig: {
    sidebar: [
      {
        text: 'Examples',
        items: [
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      }
    ]
  },

  // https://vitepress.dev/guide/i18n
  locales: {
    root: {
      label: 'English',
      lang: 'en',

      // locale-specific theme config override
      themeConfig: {
        nav: [
          { text: 'Home', link: '/' },
          { text: 'Examples', link: '/markdown-examples' }
        ]
      }
    },
    lv: {
      label: 'Latviešu',
      lang: 'lv',
      themeConfig: {
        nav: [
          { text: 'Sākums', link: '/' },
          { text: 'Piemēri', link: '/markdown-examples' }
        ]
      }
    }
  }
})

[tassoman]

This message should be marked as answered ✅

[JohnUW42]

Thank you very much !

One more thing, though, please.

I noticed that the language switching does not persist through pages.

That is, when I switch from English to the other language on the list, and then navigate to another page, then that page is in English, but the expectation is that it must be in the same current language.

Would you please assist with that as well!

Thank you!

[brc-dd]

Override the sidebar too:

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Awesome Project',
  description: 'A VitePress Site',

  locales: {
    root: {
      label: 'English',
      lang: 'en',
      themeConfig: {
        sidebar: [
          {
            text: 'Examples',
            items: [
              { text: 'Markdown Examples', link: '/markdown-examples' },
              { text: 'Runtime API Examples', link: '/api-examples' }
            ]
          }
        ],
        nav: [
          { text: 'Home', link: '/' },
          { text: 'Examples', link: '/markdown-examples' }
        ]
      }
    },
    lv: {
      label: 'Latviešu',
      lang: 'lv',
      themeConfig: {
        sidebar: [
          {
            text: 'Examples',
            items: [
              { text: 'Markdown paplašinājuma piemēri', link: '/lv/markdown-examples' },
              { text: 'Izpildes laika API piemēri', link: '/lv/api-examples' }
            ]
          }
        ],
        nav: [
          { text: 'Sākums', link: '/lv/' },
          { text: 'Piemēri', link: '/lv/markdown-examples' }
        ]
      }
    }
  }
})

[JohnUW42]

Excellent, thank you very much ! :-)