Vuepress Internationalization

Question

I am currently working with Vuepress. But I want multiple languages in my Vuepress site. After 3 days of struggling I have decided to put my question here. (Yes I checked the Vuepress documentation: https://vuepress.vuejs.org/guide/i18n.html#default-theme-i18n-config)

The Problem: In my config I have Dutch as main language. When I want to put English as locale. My navigation wont update. Here is my config:

module.exports = {
    title: 'Portfolio Bjorn',
    description: ' ',
    themeConfig: {
        nav: [
            { text: 'Over mij', link: '/overmij.html'},
            { text: 'Portolfio', link: '/portfolio/'},
            { text: 'Contact', link: '/contact.html'},
            {
                text: 'Languages',
                items: [
                  { text: 'Dutch', link: '/' },
                  { text: 'English', link: '/english/' }
                ]
            } 
        ],
        sidebar: {
            '/portfolio/': [
                '',
                'school',
                'zelfgemaakt'

            ]
        },
        locales: {

            '/english': {
            lang: 'en-Us',
            nav: [
            { text: 'About', link: '/about.html'},
            { text: 'Portfolio', link: '/portfolio_en/'},
            { text: 'Contact', link: '/contact_en.html'},
            ]   
            }
        }

    }
}

I also have a picture of my folder structure:

I hope someone knows the answer to this so I can continue.

Kind regards

Answer 1

I am assuming you are using a default theme.

You made a simple mistake in your config – you placed your general locale options in your themeConfig.

Instead, you need to define your locale for the site in general, and then you can also define localized data specific to your theme config.

Your config should look like so:

module.exports = {

  locales: {
    /* This is where you place your general locale config */
    '/': {
      lang: 'nl-NL',
    },
    '/en/': {
      lang: 'en-US',
      title: 'english title of the website'
    }
  },


  themeConfig: {
    locales: {
      /* This is where you place your theme specific, localized data */
      '/': {
        nav: [/* dutch nav */]
      },
      '/en/': {
        nav: [/* english nav */]
      },
    }
  }
}