How do you translate route parameters? (Custom Route Paths)

[MickL]

Using custom route paths is a nice feature and translating the routes is a kinda must-have for SEO. But how do you guys translate route parameters?

E.g. imagine a clothing shop:

File:
/pages/products/[category].vue

EN:
/products/shirts
/products/pants

DE:
/produkte/shirts
/produkte/hosen

But how may I handle translated route params? Somehow I need to map it to an enum, e.g. both "pants" and "hosen" should be mapped to enum Category.Pants. Of course I could go with the enum as route param instead but then there would be no benefit for SEO: /products/0 and /products/1

[BobbieGoede]

I believe what you're asking can be achieved by combining the customRoutes feature with the useSetI18nParams composable, which used to set localized dynamic route parameters.

[MickL]

I dont think useSetI18nParams is what I am looking for, it seems to be useful for language switching:

• I use useLocalePath() to create a menu. Here I need to have products/* be translated, this I could do by translating the enum
• When on a category page the category are already translated oin the current language so I need to reverse-translate them to the Enum before I make the call to the API.

[MickL]

@BobbieGoede Some time has passed and v9 is around the corner. I still cant figure out how to solve this, maybe you have an idea?

<script setup lang="ts">
const route = useRoute();
const category = route.params.id; // <-- This is 'pants' for en, and 'hosen' for de

defineI18nRoute({
  paths: {
    en: '/products/[category]',
    de: '/products/[category]',
  },
});

const { data, pending, error } = await useLazyFetch<ProductsResponse>('/api/products', {
    query: {
      category, // <-- This needs to be 'pants' for all languages
    },
  },
);
</script>

If I am not stupid then I need to reverse-translate the category or not? I have a translated string but I need the key. I wonder if no one else has the problem, it should be a very common one.