setI18nRouteParams with nested url

[Buzut]

For declaring custom localised URLs, we have this exemple from the docs:

// in pages/news/[id].vue
// for en/news/1-first-article
const { $switchLocaleRoute, $setI18nRouteParams, $defineI18nRoute } = useI18n();
// OR
const { $switchLocaleRoute, $setI18nRouteParams, $defineI18nRoute } = useNuxtApp();
$defineI18nRoute({
  localeRoutes: {
    en: '/news/:id()',
    fr: '/nouvelles/:id()',
    de: '/Nachricht/:id()',
  },
})
const { data: news } = await useAsyncData(`news-${params.id}`, async () => {
  let response = await $fetch("/api/getNews", {
    query: {
      id: params.id,
    },
  });
  if (response?.localeSlugs) {
    response.localeSlugs = {
      en: {
        id: '1-first-article'
      }
      fr: {
        id: '1-premier-article'
      }
      de: {
        id: '1-erster-Artikel'
      }
    }
    $setI18nRouteParams(response?.localeSlugs);
  }
  return response;
});
$switchLocalePath('fr') // === 'fr/nouvelles/1-premier-article'
$switchLocalePath('de') // === 'de/Nachricht/1-erster-Artikel'

Now what if we need to match several levels, like fr/nouvelles/monde/1-premier-article? It's a very common case (news subcategories, e-commerce…).

Nuxt handles this out of the box with [...slug], but I couldn't find the matching way with defineI18nRoute/setI18nRouteParams.

[Buzut]

By the way, huge thank you for making this module! I just realised first commit was in august. I'm impressed by the quality and completeness of what you've achieved on such a tight timeframe.

[s00d]

By the way, huge thank you for making this module! I just realised first commit was in august. I'm impressed by the quality and completeness of what you've achieved on such a tight timeframe.

Thank you so much for the kind words! Actually, the development of the core module took significantly more time than it may seem. A lot of that time went into studying the Nuxt i18n core and working through various issues in the module. Initially, I didn't publish anything as I was spending a lot of time learning and testing things locally. But yes, you're right—once I had a clear understanding, a large part of the functionality wasn't too hard to implement.

[s00d]

Hi, to implement something like this with multiple levels in your localized URLs, it's best to define two levels of parameters in the route, for example: /news/:key/:slug.

Here’s an example of how you can do this:

// in pages/news/[key]/[slug].vue
const { $switchLocaleRoute, $setI18nRouteParams, $defineI18nRoute } = useI18n();
// OR
const { $switchLocaleRoute, $setI18nRouteParams, $defineI18nRoute } = useNuxtApp();

$defineI18nRoute({
  localeRoutes: {
    en: '/news/:key/:slug()',
    fr: '/nouvelles/:key/:slug()',
    de: '/Nachricht/:key/:slug()',
  },
});

const { data: news } = await useAsyncData(`news-${params.key}-${params.slug}`, async () => {
  let response = await $fetch("/api/getNews", {
    query: {
      key: params.key,
      slug: params.slug,
    },
  });

  if (response?.localeSlugs) {
    response.localeSlugs = {
      en: {
        key: 'world',
        slug: '1-first-article',
      },
      fr: {
        key: 'monde',
        slug: '1-premier-article',
      },
      de: {
        key: 'welt',
        slug: '1-erster-Artikel',
      },
    };
    $setI18nRouteParams(response?.localeSlugs);
  }
  return response;
});

$switchLocalePath('fr') // === 'fr/nouvelles/monde/1-premier-article'
$switchLocalePath('de') // === 'de/Nachricht/welt/1-erster-Artikel'

In this example, we handle two dynamic segments (:key and :slug) in the URL. By using $defineI18nRoute, we can map localized paths accordingly and set the correct parameters using $setI18nRouteParams.

This approach will allow you to manage URLs like fr/nouvelles/monde/1-premier-article easily across different locales.

[Buzut]

Yes indeed, I had tried this! Unfortunately, this doesn't fill in the gap where the url levels aren't know in advance. For instance, users (ie. admins in an e-commerce) can create categories and sub-categories and developper has no control over that (or just fixing a limit to 2 or 3 level and handling these cases).

I think it would be a huge addition, now I'd understand if you're not willing or if there's some technical reason that prevents or makes it really complex.

[s00d]

I don't quite understand your problem. Why can't you use /:key/:slug? Just check key on the backend, and if it's not found, show a 404. In theory, I understand what you're trying to achieve, but it's technically difficult to implement.

[Buzut]

Hey there,

Really sorry to get back after such a long time. I get that there's no easy solution. And I definitely wouldn't want something that hinders performance. I went the route of not translating urls at all, so it simplifies things.

Anyway, not because I've dropped this feature currently that it can't be useful. Here's the use case preventing me from using :key/:slug.

This would be perfectly appropriate for :category/:product for instance. Now what if there's actually a non-defined category levels? Category can be either category/product as well as category/subcategory/product or even category/subcategory/subsubcategory/product. You see where I'm going?

That being said, it's still an edge case and, as I said, if it's too complicated or at risk of hindering global performance, we would rather not make any tradeoff. So feel free to close the topic 👍