NuxtJS i18n [vue-router] Route with name about_us___en does not exist

Question

Im using nuxtjs 2.10.x and i18n module. Nu custom middleware or anything like that. The routing is working fine.

my nuxt.config.js modules/i18n part:

    ...
modules: [
'@nuxtjs/axios',
'@nuxtjs/pwa',
'@nuxtjs/auth',
'@nuxtjs/dotenv',
'nuxt-fontawesome',
[
  'nuxt-i18n',
  {
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        file: 'en.json',
        name: 'English'
      },
      {
        code: 'zh',
        iso: 'zh-CN',
        file: 'zh.json',
        name: '简体中文'
      }
    ],
    lazy: true,
    langDir: 'locales/',
    defaultLocale: 'en',
    strategy: 'prefix_except_default',
    differentDomains: false,
    vueI18n: {
      fallbackLocale: 'en'
    },
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'lang'
    }
  }
    ]
  ],
...

pages folder structure:

  'pages/'
    |--'contact_us.vue'
    |--'_lang/'
         |--'contact_us.vue'

But I'm getting this crazy warning: [vue-router] Route with name 'contact_us___en' does not exist. Actually nuxt is giving similar warning for the all pages I have. And there is no any clue why it's like that. What is possibly wrong?

Answer 1

This error is thrown by the localePath() function used to generate urls for the current locale.

Curiously it does not work by manipulating the passed in url, but by trying to match the name property of the route as defined in vue router:

Which means to find the url for a page we need to write it as follows:

localePath('index')       >>>   "/"
localePath('login')       >>>   "/login"
localePath('tech-test')   >>>   "/tech/test"

The following ways would throw an error and default to '/'

localePath('/')            >>>   "/"
localePath('/login')       >>>   "/"
localePath('tech/test')    >>>   "/"

Documentation: https://nuxt-community.github.io/nuxt-i18n/basic-usage.html#nuxt-link

Edit: I have submitted a pullrequest that would allow the use of paths as string:

localePath('/')          >>>   "/"
localePath('/tech/test') >>>   "/tech/test"

https://github.com/nuxt-community/nuxt-i18n/pull/554