nuxt i18n routing not working for sub pages

1
votes

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?

2
vue.jsvue-routernuxt.jsvue-i18nnuxt-i18n
I can work well according to this example – sugars
But isn't that something nuxt is handling automatically? In this example, there is always a duplicate for each page. Also the i18n is loaded as plugin instead of a nuxt module. The links are also different e.g. <NuxtLink :to="$i18n.path('about')"... – grindking

2 Answers

6
votes

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. Their 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).

2
votes

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>