how does localePath() work with dynamically generated routes?

[katerlouis]

I'm building a multilang site using storyblok as cms with prefix_except_default strategy. Before using storyblok, I used localePath('some-route-name') (emphasis on route-name here!) – But now that we generate most pages with storyblok, I don't know how to get the localePath for such storyblok page, when I need to reference it hardcoded somehwere. Again: some pages are still completely custom coded, but require links to storyblok pages.

Any suggestions on that?

[rchl]

I believe you want https://i18n.nuxtjs.org/lang-switcher#dynamic-route-parameters

[katerlouis]

Oh, I just noticed that when doing

extendRoutes(routes, resolve) {
  routes.push({
    name: 'pilz',
    path: '/pilz',
    component...
}), 

that nuxt-i18n hooks into that and already creates pilz___de and pilz___en routes in .nuxt/router.js – but how can I provide the translated path? pilz___en gets /en/pilz, but would need the translated /en/mushroom

[rchl]

I get /en/impressum but expect /en/imprint

Yes, I see now. So only Storyblock knows the mapping route -> localized name and so to make localePath work correctly, the only solution is to make nuxt-i18n aware of the mapping. Currently the only way to do that dynamically is using by using https://i18n.nuxtjs.org/lang-switcher#dynamic-route-parameters but that supports the currently opened route only. Maybe we are missing something like that but for multiple routes at once. Then you could create a plugin that sets it once for all routes.

Maybe I can use some form of hook in nuxt-i18n to extend the routes with access to nuxts context? nuxt-i18n obviously also extends the routes outside of nuxt.config.js

Nuxt extends the routes but there is no access to context at that point.

[rchl]

that nuxt-i18n hooks into that and already creates pilz___de and pilz___en routes in .nuxt/router.js – but how can I provide the translated path? pilz___en gets /en/pilz, but would need the translated /en/mushroom

https://i18n.nuxtjs.org/options-reference#pages is for providing the mapping but you don't have access to context at that point.

[katerlouis]

So with parsePages: true nuxt-i18n will look through files in pages.vue, serach for nuxtI18n.paths and push the correct routes accordingly?

pages: {} is only used if parsePages is false? So no matter what, this doesn't help me, since I intend to use nuxtI18n.paths for some pages that don't come from storyblok :D

It's hard to wrap my head around all this; please tell me if my assumption is correct, that extendRoutes() is picked up by nuxt-i18n and takes each route to create new routes for every locale specifically?

Could you maybe provide an example using pages: {} to realize my impressum use case? I'm thinking that fetching all routes without the context isn't too bad. All I need is axios and my token.

[rchl]

Something like this I guess:

  pages: {
    impressum: {
      en: '/imprint',
    }
  }