CODEWITHSUNDEEP
vue.jsvue-routernuxt.jsvue-i18nnuxt-i18n
grindking
grindking

Reputation: 937

nuxt i18n routing not working for sub pages

I have changed my app to make it work with nuxt i18n and the translation seems to work when I access the routes directly.

E.g. http://localhost:3000/fr/step/1

I have the following structure in my app and each step is one page with different components inside.

enter image description here

My nuxt config:

enter image description here

In the documentation it says I need to add localePath for my nuxt-links to make it work with the i18n plugin. https://nuxt-community.github.io/nuxt-i18n/basic-usage.html#nuxt-link

For example: 

<nuxt-link to="localePath('about')">About</nuxt-link>

In my app I used to navigate to the next step programmatically like:

this.$router.push({ path: `step/${this.currentStep + 1}` });

Now I have two problems (questions):

  1. How would I navigate to the route programmatically with localePath? For example this.localePath('step/2') doesn't work. It redirects always to the frontpage.
  2. Why is it not working with a normal link in the template? I have tested this:
    <nuxt-link :to="localePath('step/2')">Foo</nuxt-link> but it also doesn't work. When I try something like:
    <nuxt-link :to="localePath('success')">Foo</nuxt-link> it works because the success page is on the first level.

It seems that there is something wrong in the routing or the way I handle the subpages. Can anyone help me with this?

Upvotes: 6

Views: 12521

Answers (4)

Manos
Manos

Reputation: 141

Not sure if this is relevant here, but it may help someone. If you're working outside a component (e.g., in a store), you can use nuxtApp.vueApp.localePath(path, newLocale) to generate a localized path. Here, path is the current path you want to redirect to, and newLocale is the target locale.

Upvotes: 0

Elif Nur Turk
Elif Nur Turk

Reputation: 11

The code below works in my full directions

   export default defineNuxtConfig({
      modules: ['@nuxtjs/i18n'],
      i18n: {
        // Module Options
        lazy: true,
        langDir: "locales", 
        strategy: "prefix_except_default",
        defaultLocale: "de", // Default Language
        locales: [
            { code: "fr", iso: "fr-FR", file: "fr.json"},
            { code: "de", iso: "de-DE", file: "de.json" },
        ],
      }
    })

Upvotes: 0

Dennis Burger
Dennis Burger

Reputation: 309

Below worked for me. I have a Nuxt pages structure like this.

/pages/settings/car-form.vue

This is the Nuxt link to this sub-page with the working localePath(). Note the missing slash below in the path.

<nuxt-link :to="localePath({ name: 'settings-car-form' })">Car form</nuxt-link>

As the Nuxt docs suggest: you have to link to the (Nuxt) route name. Slashes in the path become a dash. See the routes array on the documentation page.

You can lookup the name of the Nuxt routes of your project in the Nuxt generated .nuxt/routes.json -file. There you'll find your routes with a __en (for english, or __de for German) suffixes added to the name property. Point the above localePath() to that name WITHOUT the __en suffix (like in my example above).

Upvotes: 7

grindking
grindking

Reputation: 937

Ok, think I found the solution to my problem but I'm not sure if this the correct way to do it:

To switch the route with the current locale this works for me:

this.$router.push({ path: this.localePath({ path: `step/${this.currentStep + 1}` }) });

In the template it works with:

<nuxt-link
  :to="localePath({ path: `step/${currentStep + 1}` })">
  Next step
</nuxt-link>

Upvotes: 3

Related Questions