Feature: Dynamic route parameters should not be set using definePageMeta

[adesombergh]

Hi, thanks for the great work with this module.

I stumbled into a problem with i18n module v8 and nuxt3 and I think it might be interesting to change this in the future, as it makes it difficult to use with dynamic content.

Please, correct me if i'm not doing in right.

The Problem

According to the Dynamic route parameters documentation, to set translations for route params we should use definePageMeta like so:

<script setup>
definePageMeta({
  // ...
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
  // ...
})
</script>

However, the Nuxt 3 documentation about definePageMeta (right here) says that the page meta object cannot reference the component (or values defined on the component).

It means that the content inside definePageMeta({}) is supposed to be hard-coded and cannot be dynamic, making it impossible to set the page route params dynamically (as they often are). The following code won't work:

<script setup>
// /pages/[slug].vue
const route = useRoute()
const { locale } = useI18n()
const { data } = await useFetch(
  `https://yourapi.com/${locale}/page/${route.params.slug}`
)

definePageMeta({ 
  nuxtI18n: data.value.other_languages // Throws an error because data is undefined
})
</script>

{
  "other_languages": {
    "en": { "slug": "tech-specs"},
    "fr": { "slug": "specifications-techniques"},
  },
  ...more content ...
}

A solution

Instead of using definePageMeta, maybe i18n module could give us a composable like setParamsTranslations or whatever, that could be used like this:

<script setup>
// /pages/[slug].vue
const route = useRoute()
const { locale, setParamsTranslations } = useI18n()
const { data } = await useFetch(
  `https://yourapi.com/${locale}/page/${route.params.slug}`
)
setParamsTranslations(data.value.other_languages)
</script>

If anyone agrees I can create an issue (feature)

[madc]

We are just looking at the same issue. A composable would be very cool.

[adriaandotcom]

Trying this indeed does not work:

const nuxtI18n = computed(() => articles?.value?.[0]?.languages || {});

definePageMeta({
  nuxtI18n,
});

[adriaandotcom]

If you aren't concerned about SSR, you can use this.

<script setup>
const route = useRoute()
definePageMeta({
  nuxtI18n: {}
})

const slug = ref()

// Let's say you have an article with the page slug
const page = computed(() => {
  if (!pages.value) return;
  slug.value = pages.value.slug;
  return pages.value;
});

watch(
  slug,
  () => { route.meta.nuxtI18n = nuxtI18n },
  { deep: true }
);
</script>

See #1588 (comment) for more info.

[adriaandotcom]

Even better:

#1736 (comment)

[BobbieGoede]

I have just released rc.9 which includes the new useSetI18nParams composable, more detailed example of its usage here.

The composable works in a similar way to your proposed solution, please let me know if it works for your or if you run into any issues!

[madc]

This made my day, thanks for working on this!

[adesombergh]

I have not tested it yet but it looks like it's exactly what we needed to set dynamically translated route params. Thank you for the good work!

[romainavalle]

Hey guys

I think I have found a workaround for SSR dynamic slugs.
I would love feedbacks cause it is a bit hacky.
I delay the rendering of the lang-switcher by either waiting a callback event to know that the I18nParams hd been changed or just a timeout.

https://gist.github.com/romainavalle/638dcffb657fe49857a00a45aa3ecf48