Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nuxt-link is not changing to localized path #709

Closed
1 of 2 tasks
janswist opened this issue May 14, 2020 · 6 comments
Closed
1 of 2 tasks

Nuxt-link is not changing to localized path #709

janswist opened this issue May 14, 2020 · 6 comments
Labels

Comments

@janswist
Copy link

janswist commented May 14, 2020

Version

nuxt-i18n: 6.11.1
nuxt: 2.12.2

Nuxt configuration

mode:

  • universal
  • spa

Nuxt-i18n configuration

i18n: {
    lazy: true,
    langDir: 'lang/',
    locales: [
      {
        code: 'en',
        name: 'English',
        file: 'en-US.js',
        flag: '🇬🇧'
      },
      {
        code: 'pl',
        name: 'Polski',
        file: 'pl-PL.js',
        flag: '🇵🇱'
      }
    ],
    defaultLocale: 'pl',
  },
}

Reproduction Link

No link.

Steps to reproduce

I have a navbar with nuxt-links like this:

b-nav-item.mr-4(
  :to="localePath('/profile')"
) {{ $t('navbar.profile') }}

(yes, navbar.profile translation works as expected)
and a component /profile with this:

export default {
  nuxtI18n: {
    paths: {
      en: '/profile',
      pl: '/moj-profil',
    }
  },
  ...
}

What is Expected?

When:

  • on default locale (pl) I expect domain.com/moj-profil
  • when on en locale then domain.com/en/profile.

What is actually happening?

  • On pl locale I get: domain.com/profile and error page not found when clicked (but when I manually input /moj-profile then I can access the page so that part in component seems to work). Should be domain.com/moj-profil
  • on en I get domain.com/en/profile and clicked this works
@rchl
Copy link
Collaborator

rchl commented May 14, 2020

Duplicate of #641

It might work when referring to route by name rather than path but probably it won't given what I said in #641.

@rchl rchl closed this as completed May 14, 2020
@janswist
Copy link
Author

Then what's the point of this section: https://nuxt-community.github.io/nuxt-i18n/routing.html#in-component-options

If we can create localized paths in-component then I suppose it's natural that we also want to access them via those links. So what is the solution for that? Give my routes name?

@rchl
Copy link
Collaborator

rchl commented May 14, 2020

Actually it works when using route name. You can check it out here: https://codesandbox.io/s/i18n-plugin-i18nlocales-ouwhn?file=/pages/index.vue

Every route has a name. You can see them in generated file in .nuxt/route.js. You can pass those to localePath. It's preferred anyway as passing paths is not gonna work in all cases (for example this case or with dynamic routes).

@janswist
Copy link
Author

Actually it works when using route name. You can check it out here: https://codesandbox.io/s/i18n-plugin-i18nlocales-ouwhn?file=/pages/index.vue

Every route has a name. You can see them in generated files in .nuxt/route.js. You can pass those to localePath. It's preferred anyway as passing paths is not gonna work in all cases (for example this case or dynamic paths).

Thanks! That worked - haven't seen .nuxt/router.js before.

@janswist
Copy link
Author

One more thing (for others): when adding localePath() to your nuxt-link you have to restart the whole server. Seems like it's not supported by hot reload and it might save you some headaches.

@Energon7
Copy link

Energon7 commented Mar 4, 2021

fix here: #1088

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants