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?

Timar Ivo Batis · Accepted Answer · 2019-12-28T15:41:31.340

13

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

edited Dec 28 '19 at 15:41

answered Dec 27 '19 at 08:21

Timar Ivo Batis

1,861
17
21

1

I got your point. And I see now in the documentation examples they use `localePath('index')`. Before I've seen somewhere `localePath('/')` – Shirker Dec 27 '19 at 08:45
yes i wrote it right hte first time. but not in the samples. – Timar Ivo Batis Dec 27 '19 at 08:48
i will try to submit a pull request, because this is not a nice way to write routes. – Timar Ivo Batis Dec 27 '19 at 08:50
BTW can I do something like this ``? – Shirker Dec 27 '19 at 08:54
1

Yes, but `localePath('index')` can result in `"/"` or `"/fr"`. Which means sometimes youll have to add a >`'/' + 'products/'` and sometimes not. – Timar Ivo Batis Dec 27 '19 at 09:05
you could use , `(temp1.localePath('index') + '/products/').replace('//','/')` – Timar Ivo Batis Dec 27 '19 at 09:10
Thank you. Will it affect the perfomance? currently I'm using `(this.localePath('index') == '/' ? '/': this.localePath('index') + '/') + ...` – Shirker Dec 27 '19 at 09:59
1

considering how much more logic the localePath function has (200 lines), I would suggest calling it only once. – Timar Ivo Batis Dec 27 '19 at 11:11

score 0 · Answer 2 · edited Jan 30 '21 at 12:38

0

 <nuxt-link :to="localePath({ name: 'your-dynamic-path' })">
    Some text...
  </nuxt-link>

This is how I configured mine.

edited Jan 30 '21 at 12:38

Dharman

30,962
25
85
135

answered Jan 30 '21 at 12:33

damisparks

93
1
10

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

2 Answers2