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 */]
      },
    }
  }
}

Answer 2

I believe you need to set your base locale, and set the defaults there, rather than the standard way you are doing above, for example:

module.exports = {
    title: 'Portfolio Bjorn',
    description: ' ',
    themeConfig: {
        locales: {
            '/': {
                label: 'Dutch',
                nav: [
                    { text: 'Over mij', link: '/overmij.html'},
                    { text: 'Portolfio', link: '/portfolio/'},
                    { text: 'Contact', link: '/contact.html'},
                ]
            },
            '/english': {
                label: 'English',
                nav: [
                    { text: 'About', link: '/about.html'},
                    { text: 'Portfolio', link: '/portfolio_en/'},
                    { text: 'Contact', link: '/contact_en.html'},
                ]   
            }
        }
    }
}

You also don't need to define the language dropdown in the nav, I believe it's automatically triggered when you set multiple languages