I18n-module: Favour no prefix default route when using prefix_and_default_strategy

[coin-au-carre]

I am using the prefix_and_default strategy. Let's say my default locale is en. I would like to favour www.foo.com/blog rather than www.foo.com/en/blog.

It seems that the routes with prefix are favoured. How can favour the other way ?

I am in PWA mode and using yarn dev.

[rchl]

Please give a specific example where it doesn't work (ideally with configuration you are using).
localePath already favors non-prefixed route at least.
I need more info.

[coin-au-carre]

Thanks for your answer. Here our i18n configuration :

i18n: {
      strategy: 'prefix_and_default', // default is prefix_except_default
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          name: 'English'
        },
        {
          code: 'fr',
          iso: 'fr-FR',
          name: 'Français'
        },
      ],
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected'
      },
      vueI18nLoader: true,
      defaultLocale: 'fr',
      vueI18n: {
        fallbackLocale: 'fr',
        silentFallbackWarn: true,
        messages: {
          fr: {
            language: 'Français'
          },
          en: {
            language: 'English'
          }
        }
      },
      baseUrl: process.env.SITE_BASE_URL, // https://github.com/nuxt-community/nuxt-i18n/blob/master/docs/seo.md
      seo: false // Recommended to set to false and do https://nuxt-community.github.io/nuxt-i18n/seo.html#improving-performance

Our default locale is fr.

In our code a :to="localePath('/blog') will lead to www.foo.com/fr/blog instead of www.foo.com/blog.

[rchl]

If you hover the link is it /blog or /fr/blog?

I can't reproduce in https://codesandbox.io/s/nuxt-i18n-issue-721-e8mzf?file=/pages/index.vue
Please fork it and try to reproduce there.

[coin-au-carre]

I am trying to reproduce the problem by forking but no I can't ... Trying to play with the packages version.

If I hover the link it is /fr/blog.

[coin-au-carre]

Well I have there https://codesandbox.io/s/nuxt-i18n-issue-721-kw2eg?file=/nuxt.config.js

 WARN  [vue-router] Route with name 'about___fr___default' does not exist

Investigating this...

[rchl]

WARN [vue-router] Route with name 'about___fr___default' does not exist

You have included nuxt-i18n twice in that sandbox.

[coin-au-carre]

I have succeeded reproducing the problem here : https://codesandbox.io/s/vibrant-dream-widiw?file=/nuxt.config.js

As you can see the route with /fr/about is favored

[rchl]

Right, I can see the problem now.

BTW. Your test is ambiguous as the outcome of the test depends on the currently selected locale and we can't see or change that. Here is a better test: https://codesandbox.io/s/stoic-cache-li0bt?file=/pages/index.vue . Or you could explicitly ask for fr locale in localePath.

Also, the bug wouldn't trigger if you would pass the route name (about) rather than the path (/about). Route names are always better options, if possible.

But it's a bug nonetheless.

[coin-au-carre]

Thank you for your quick answer !

Indeed using the route name works :to="localePath('about')" :)

Or you could explicitly ask for fr locale in localePath

I am not sure I have understood this statement. Using :to="localePath('/about', 'fr')"
would still show the prefixed url /fr/about https://codesandbox.io/s/gifted-glitter-4j6pg?file=/pages/index.vue whatever the chosen selected locale.

[rchl]

:to="localePath('/about', 'fr')" will show the bug.
:to="localePath('/about')" will not show the bug if current locale is en.

[coin-au-carre]

I still dod not get it. If the current locale is en by clicking the button "Set locale EN", with :to="localePath('/about')", I see that the route is /en/about instead of (/about). So the bug also occurs here right ?

[rchl]

Only default locale has prefix-less path.

In that test the fr locale is the default one so it has both /about and /fr/about routes.

English route only has /en/about path.

So when you call localPath('/about') while current locale is en, it's expected to get /en/about.

[coin-au-carre]

Ah yes sorry I am confusing myself :D....

So to sum up and to clarify for whoever has the bug: if we look at the doc https://nuxt-community.github.io/nuxt-i18n/basic-usage.html#nuxt-link

Using Routes by path localePath('/app/profile') and choosing a different current locale than en (here fr in my case), triggers the bug where we see /fr/app/profile instead of /app/profile.

Current solution to avoid the bug is to use route by name localePath('app-profile') and we should get /app/profile. Am I right ?

[rchl]

That's correct.

But it's still a bug that resolving by path doesn't select the most optimal option and that will be fixed.