Feature: Dynamic route parameters should not be set using definePageMeta #1736

kazupon · 2022-12-15T02:18:04Z

Discussed in #1730

^{Originally posted by adesombergh December 13, 2022}
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)

The text was updated successfully, but these errors were encountered:

kazupon · 2022-12-15T02:46:24Z

This issue was miss-taken.
We need to more discuss this issue.

provok-me · 2023-01-10T02:00:18Z

I have the same issue.

My dirty workaround for the time being:

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

if (data?.value) {
  route.meta.nuxtI18n = data.value.other_languages;
}
</script>

motion-work · 2023-01-16T15:10:46Z

having the same trouble! in nuxt 2 I used this: https://i18n.nuxtjs.org/lang-switcher#dynamic-route-parameters
would be amazing to see this in the new V8

adriaandotcom · 2023-01-17T13:25:27Z

Your solution works great @provok-it, but it doesn't work on SSR, right? With view-source:, I get the same URLs:

And with the inspector, it shows the updated URLs:

Is that the case with you as well?

adriaandotcom · 2023-01-18T04:45:21Z

Got is working like this:

// pages/blog/[slug].vue

const { data: blog } = await useFetch(`https://yourapi.com/${locale}/page/${route.params.slug}`)

if (blog?.value) {
  route.meta.nuxtI18n = blog.value?.languages || {};
}

const head = useLocaleHead({
  identifierAttribute: "id",
  addSeoAttributes: true,
});

useHead({
  link: head.value.link,
  meta: head.value.meta,
});

Where blog.value.languages is an object like this:

{
  en: { slug: "english-slug" },
  de: { slug: "german-slug" },
  fr: { slug: "french-slug" }
}

Works both in SSR and normal mode.

madc · 2023-01-19T15:33:48Z

It seems not to work with SSG. Has anyone tried to get with working with static rendering?

provok-me · 2023-01-20T17:08:53Z

@adriaanvanrossum I double checked.
My version of the hack is also working with SSR 👌

provok-me · 2023-01-20T18:45:11Z

It seems not to work with SSG. Has anyone tried to get with working with static rendering?

@madc SSG and nuxt-i18n are not working great for me.
See #1807

adriaandotcom · 2023-01-23T11:44:07Z

My version of the hack is also working with SSR 👌

For me, it worked as well, until it didn't anymore :)

BobbieGoede · 2023-02-20T11:27:16Z

The workaround seems to work, but it seems you will have to set the route meta on each route change.

I made a reproduction to show that the meta links lose their translations if query parameters change and the route meta is not set again here.

provok-me · 2023-02-21T12:00:49Z

@BobbieGoede
This comment will probably help you:
#1807 (comment)

BobbieGoede · 2023-02-22T15:31:53Z

@provok-it
I'm not sure if I had issues with switching locales but it would make sense if that wasn't working as well. For me it was just meta tags not updating while on the 'same' page (switching categories in a search page).

I ended up with the following composable, it's not pretty but it seems to work so far.

import { resolveUnref } from "@vueuse/shared";

type UseHeadParams = Parameters<typeof useHead>;
type useLocaleHeadParams = Parameters<typeof useLocaleHead>[0];

export default ([input, options]: UseHeadParams, localeOptions: useLocaleHeadParams) => {
    const route = useRoute();
    const i18nHead = useLocaleHead(localeOptions);

    useHead(() => {
        const i = resolveUnref(input);
        return {
            ...i,
            link: [...(resolveUnref(i?.link) ?? []), ...(i18nHead.value.link ?? [])],
            meta: [...(resolveUnref(i?.meta) ?? []), ...(i18nHead.value.meta ?? [])],
        };
    }, options);

    const _i18nParams = ref<Record<string, any>>({});
    const i18nParams = computed({
        get: () => _i18nParams.value,
        set: (val: Record<string, any>) => {
            _i18nParams.value = val;
            route.meta.nuxtI18n = i18nParams.value;
        },
    });

    watch(
        () => route.fullPath,
        () => (route.meta.nuxtI18n = i18nParams.value)
    );

    return { i18nParams };
};

Usage like so

const { i18nParams } = useI18nParams(
    [() => ({ title: t('productSearchTitle') })],
    { identifierAttribute: 'id', addSeoAttributes: true }
)

const fetchProducts = async () => {
    // ... fetch products 
    // set i18nParams triggering composable to update `route.meta.nuxtI18n`
    i18nParams.value = {
        en: { slug: "english-slug" },
        de: { slug: "german-slug" },
        fr: { slug: "french-slug" }
    }
}

mroddev · 2023-03-15T12:07:15Z

Got is working like this:

// pages/blog/[slug].vue

const { data: blog } = await useFetch(`https://yourapi.com/${locale}/page/${route.params.slug}`)

if (blog?.value) {
  route.meta.nuxtI18n = blog.value?.languages || {};
}

const head = useLocaleHead({
  identifierAttribute: "id",
  addSeoAttributes: true,
});

useHead({
  link: head.value.link,
  meta: head.value.meta,
});

Where blog.value.languages is an object like this:

{
  en: { slug: "english-slug" },
  de: { slug: "german-slug" },
  fr: { slug: "french-slug" }
}

Works both in SSR and normal mode.

Can't get this to work with SRR. It always renders a diferent link between the view-source and the inspector.

Even if I do something like this to try test it. It works but the view-source will have different links in the language switcher.

const route = useRoute()

const articleLangs = {
  en: {
    slug: 'some-english-slug'
  },
  pt: {
    slug: 'some-portuguese-slug'
  }
}

route.meta.nuxtI18n = articleLangs

adriaandotcom · 2023-03-17T01:15:58Z

Try using useHead and see if you can make it auto update on changes.

FabianEllenberger · 2023-05-15T17:49:43Z

I'm experiencing the same issue. The route.meta.nuxtI18n value seems to be updated. For example when using something like this:

const { data } = await asyncData(`https://myapi.com/page`)

if (data?.value) {
  route.meta.nuxtI18n = {
    en: {
      slug: data.value?.page?.languages.en.slug
    }
  }
}

But the switchLocalePath method still uses it's initial value – pointing to the wrong slug.
Is there maybe a way to force update switchLocalePath?

nicolaskrebs · 2023-05-19T13:17:29Z

I'm experiencing the same issue: switchLocalePath only updates when refreshing the page. Has anyone found a solution to this?

bitmonti · 2023-05-19T13:24:00Z

I changed Lang Switcher slightly on strategy 'prefix_except_default'

<NuxtLink @click="switchLocale(locale.code)">
    {{ locale.name }}
</NuxtLink>

const switchLocale = async (locale) => {
  setLocale(locale);
  await navigateTo(switchLocalePath(locale));
};

Hope that helps.

FabianEllenberger · 2023-05-22T12:59:25Z

I changed Lang Switcher slightly on strategy 'prefix_except_default'
<NuxtLink @click="switchLocale(locale.code)">
    {{ locale.name }}
</NuxtLink>
const switchLocale = async (locale) => {
  setLocale(locale);
  await navigateTo(switchLocalePath(locale));
};
Hope that helps.

This worked for me. I adjusted it a little bit to still be able to make use of :to instead of @click in NuxtLink:

<NuxtLink
      v-for="locale in locales"
      :key="locale.code"
      :to="switchLocale(locale.code)"
    >
      {{ locale.name }}
 </NuxtLink>

const switchLocalePath = useSwitchLocalePath()
const switchLocale = (locale: string) => {
  return switchLocalePath(locale)
}

nonetheless – this is a workaround and only works if route.meta is being updated manually (as explained above).

I hope we can find a solution for using definePageMeta dynamically as it is intended to be used:

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

ManiakMill · 2023-06-01T11:25:31Z

This solution route.meta.nuxtI18n works perfectly for me. But i have this kind of message:
Calling useRoute within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.

Please explain to me why I get this kind of message.

provok-me · 2023-06-05T17:34:22Z

@ManiakMill

Your router middleware's function has already access to the next and previous routes parameters since it handles a route change event.

Accessing the current route data with useRoute makes no sense because you're in between routes.

Use the "to" (first param of the middleware function) to access the current route data.

✌️

Jimmylet · 2023-06-19T13:14:40Z

I also face this problem. I tried several workarounds, not being able to define it dynamically doesn’t make sense. Thanks for this great plugin in all the way!

tomsdob · 2023-06-28T07:56:54Z

Any updates? The hacky workarounds mentioned here are somewhat working, but the issue with definePageMeta must be solved.

FabianEllenberger · 2023-07-24T13:29:54Z

I gave this another try but still can't get dynamic route parameters to work properly with data that is being fetched async.

As mentioned in the docs i tried to set them via the compiler macro definePageMeta. The issue seems to be that the compiler macro is being compiled away and can't be referenced with component data, as mentioned in the nuxt docs here.

In my case i fetch some data:

<script lang="ts" setup>
const { locale } = useI18n()

const { data } = await useAsyncGql({
  operation: 'getSlugPage',
  variables: {
    site: locale, // de
    slug: 'ueber-uns',
  },
})
// ...

The data i recive includes a page with a translation:

data: {
  page: {
    slug: 'ueber-uns',
      translation: {
        slug: 'about-us'
      }
   }
}

Then i would like to use this data and set the dynamic routes on nuxtI18n with it:

definePageMeta({
    nuxtI18n: {
      de: { slug: [data.value.page.slug] }, // should resolve to ueber-uns
      en: { slug: [data.value.page.translation.slug] } // should resolve to about-us
    },
})

When trying to do so i get the error that data is not defined:

[nuxt] [request error] [unhandled] [500] data is not defined
  at ./pages/[...slug].vue:2:21
  at ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:341:11)

If definePageMeta is not intended to hold fetched component data, how should dynamic routes with fetched data be updated? Any idea how this might be possible?

Many thanks for any help!

bitmonti · 2023-07-24T13:39:29Z

Hi, you can add it in script blog. Try...

const looksLike= {
  de: { slug: data.value.page.slug }
}
const route = useRoute();
route.meta.nuxtI18n = looksLike || {};

FabianEllenberger · 2023-07-24T14:24:37Z

Hi, you can add it in script blog. Try...

const looksLike= {
  de: { slug: data.value.page.slug }
}
const route = useRoute();
route.meta.nuxtI18n = looksLike || {};

Thank you @bitmonti for the quick respond.

I have tried your suggestion and it seems to work when wrapped inside onBeforeMount similar to what i have tried here:

<script setup>
onBeforeMount(() => {
  route.meta.nuxtI18n =
    {
      de: { slug: [data.value.page.slug] }, 
      en: { slug: [data.value.page.translation.slug] },
    } || {}

What it doesn't seem to fix is the problem when prerendering the page with nuxt generate and crawlLinks: true.
I get all routes duplicated for each locale. I'm using the prefix_except_default strategy:

Prerendering 8 initial routes with crawler
  ├─ /
  ├─ /en
  ├─ /en/about-us
  ├─ /about-us
  ├─ /ueber-uns
  ├─ /en/ueber-uns
  ...

My langswitch component looks like this (similar to your approach):

<template>
  <div>
    <NuxtLink
      v-for="loc in availableLocales"
      :key="loc.code"
      :to="switchLocale(loc.code)"
    >
      {{ loc.name }}
    </NuxtLink>
  </div>
</template>

<script lang="ts" setup>
const switchLocalePath = useSwitchLocalePath()
const { locale, locales } = useI18n()

const availableLocales = computed(() =>
  locales.value.filter((loc) => loc.code !== locale.value),
)

const switchLocale = (locale: string) => {
  return switchLocalePath(locale)
}
</script>

This setup seems to works on the server using nuxi dev but not staticly with nuxi generate. It looks like the langswitch doesn't update in time and points to a wrong route or has the wrong locale... did you get this working with static generation?

bitmonti · 2023-07-24T14:34:49Z

Sorry, no. I'm using ssr: true crawlLinks: true.

FabianEllenberger · 2023-08-22T14:13:53Z

I gave this another try but still can't get dynamic route parameters to work properly with data that is being fetched async.

As mentioned in the docs i tried to set them via the compiler macro definePageMeta. The issue seems to be that the compiler macro is being compiled away and can't be referenced with component data, as mentioned in the nuxt docs here.

In my case i fetch some data:
<script lang="ts" setup>
const { locale } = useI18n()

const { data } = await useAsyncGql({
  operation: 'getSlugPage',
  variables: {
    site: locale, // de
    slug: 'ueber-uns',
  },
})
// ...
The data i recive includes a page with a translation:
data: {
  page: {
    slug: 'ueber-uns',
      translation: {
        slug: 'about-us'
      }
   }
}
Then i would like to use this data and set the dynamic routes on nuxtI18n with it:
definePageMeta({
    nuxtI18n: {
      de: { slug: [data.value.page.slug] }, // should resolve to ueber-uns
      en: { slug: [data.value.page.translation.slug] } // should resolve to about-us
    },
})
When trying to do so i get the error that data is not defined:
[nuxt] [request error] [unhandled] [500] data is not defined
  at ./pages/[...slug].vue:2:21
  at ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:341:11)
If definePageMeta is not intended to hold fetched component data, how should dynamic routes with fetched data be updated? Any idea how this might be possible?

Many thanks for any help!

My issue explained above regarding duplicate crawled dynamic routes has been fixed since version 8.0.0-rc.3 with this setup using nuxt 3.6.5 and nuxi generate:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    strategy: 'prefix_except_default',
    defaultLocale: 'de',
    locales: [
      {
        name: 'Deutsch',
        code: 'de',
      },
      {
        name: 'English',
        code: 'en',
      },
    ],
  },
})

bitmonti · 2023-08-22T18:38:49Z

What about this? definePageMeta({ middleware: [ async function ({ meta, params }) { const data = await useNewsDetails(params.slug); // fetch meta.nuxtI18n = data.value.localizations || {}; }, ], }); von Outlook für Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Fabian ***@***.***> Sent: Tuesday, August 22, 2023 4:14:06 PM To: nuxt-modules/i18n ***@***.***> Cc: Mario Kreidl ***@***.***>; Mention ***@***.***> Subject: Re: [nuxt-modules/i18n] Feature: Dynamic route parameters should not be set using definePageMeta (Issue #1736) I gave this another try but still can't get dynamic route parameters to work properly with data that is being fetched async. As mentioned in the docs<https://v8.i18n.nuxtjs.org/guide/lang-switcher#dynamic-route-parameters> i tried to set them via the compiler macro definePageMeta. The issue seems to be that the compiler macro is being compiled away and can't be referenced with component data, as mentioned in the nuxt docs here<https://nuxt.com/docs/guide/directory-structure/pages/#page-metadata>. In my case i fetch some data: <script lang="ts" setup> const { locale } = useI18n() const { data } = await useAsyncGql({ operation: 'getSlugPage', variables: { site: locale, // de slug: 'ueber-uns', }, }) // ... The data i recive includes a page with a translation: data: { page: { slug: 'ueber-uns', translation: { slug: 'about-us' } } } Then i would like to use this data and set the dynamic routes on nuxtI18n with it: definePageMeta({ nuxtI18n: { de: { slug: [data.value.page.slug] }, // should resolve to ueber-uns en: { slug: [data.value.page.translation.slug] } // should resolve to about-us }, }) When trying to do so i get the error that data is not defined: [nuxt] [request error] [unhandled] [500] data is not defined at ./pages/[...slug].vue:2:21 at ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:341:11) If definePageMeta is not intended to hold fetched component data, how should dynamic routes with fetched data be updated? Any idea how this might be possible? Many thanks for any help! My issue explained above regarding duplicate crawled dynamic routes has been fixed since version 8.0.0-rc.3 with this setup using nuxt 3.6.5 and nuxi generate: export default defineNuxtConfig({ modules: ***@***.***/i18n'], i18n: { strategy: 'prefix_except_default', defaultLocale: 'de', locales: [ { name: 'Deutsch', code: 'de', }, { name: 'English', code: 'en', }, ], }, }) — Reply to this email directly, view it on GitHub<#1736 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AICVUTESVOFZ5K7EFJLNV3LXWS5C5ANCNFSM6AAAAAAS7GLPJQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

FabianEllenberger · 2023-08-24T09:44:30Z

I have tried this, but get the following error:
[nuxt] error caught during app initialization Error: Must be called at the top of a `setup` function Caused by: SyntaxError: Must be called at the top of a `setup` function

FabianEllenberger · 2023-08-31T09:28:34Z

Discussed in #1730
^{Originally posted by adesombergh December 13, 2022}

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)

Any news on this issue, or is it beeing tracked somewhere else?

luca-smartpricing · 2023-09-05T14:35:16Z

Any solution that work with nuxt-simple-sitemap?

provok-me · 2023-09-06T16:32:24Z

Working for me @luca-smartpricing:
#1736 (comment)

luca-smartpricing · 2023-09-07T18:28:29Z

@provoks-land
No, sorry it doesn't work. nuxt-simple-sitemap don't set rel="alternate" also if i set the param in the middleware.

  middleware(to) {
    to.meta.nuxtI18n.en = {
      blog: 'a-simple-blog'
    }
  }

BobbieGoede · 2023-12-10T11:26:41Z

It some time but with #2580 merged and released in rc.9 I will close this issue.

Try out the new useSetI18nParams composable, more detailed example of its usage here! Internally it works in a similar way to the workarounds described here, but improves on it by updating meta tags during SSR as well.

If you run into any bugs please open a new issue with a minimal reproduction 💪

FabianEllenberger · 2023-12-13T13:39:45Z

It some time but with #2580 merged and released in rc.9 I will close this issue.

Try out the new useSetI18nParams composable, more detailed example of its usage here! Internally it works in a similar way to the workarounds described here, but improves on it by updating meta tags during SSR as well.

If you run into any bugs please open a new issue with a minimal reproduction 💪

Thank you @BobbieGoede - the new release solved my issues and the useSetI18nParams seems to work as expected. 👍

kazupon closed this as completed Dec 15, 2022

kazupon reopened this Jan 10, 2023

kazupon added the v8 label Jan 10, 2023 — with Volta.net

kazupon added the feature request label Jan 16, 2023 — with Volta.net

ClementZezukaLivestorm mentioned this issue May 19, 2023

Dynamic route parameters do not work with dynamic values #2006

Closed

BobbieGoede mentioned this issue Nov 29, 2023

feat!: add useSetI18nParams composable #2580

Merged

7 tasks

BobbieGoede closed this as completed Dec 10, 2023

nuxt-modules locked as resolved and limited conversation to collaborators Jan 18, 2024

Feature: Dynamic route parameters should not be set using definePageMeta #1736

Feature: Dynamic route parameters should not be set using definePageMeta #1736

Comments

kazupon commented Dec 15, 2022

Discussed in #1730

The Problem

A solution

kazupon commented Dec 15, 2022

provok-me commented Jan 10, 2023 • edited

motion-work commented Jan 16, 2023 • edited

adriaandotcom commented Jan 17, 2023

adriaandotcom commented Jan 18, 2023

madc commented Jan 19, 2023

provok-me commented Jan 20, 2023

provok-me commented Jan 20, 2023

adriaandotcom commented Jan 23, 2023 • edited

BobbieGoede commented Feb 20, 2023

provok-me commented Feb 21, 2023

BobbieGoede commented Feb 22, 2023

mroddev commented Mar 15, 2023

adriaandotcom commented Mar 17, 2023

FabianEllenberger commented May 15, 2023

nicolaskrebs commented May 19, 2023

bitmonti commented May 19, 2023 • edited

FabianEllenberger commented May 22, 2023

ManiakMill commented Jun 1, 2023

provok-me commented Jun 5, 2023

Jimmylet commented Jun 19, 2023

tomsdob commented Jun 28, 2023

FabianEllenberger commented Jul 24, 2023

bitmonti commented Jul 24, 2023

FabianEllenberger commented Jul 24, 2023

bitmonti commented Jul 24, 2023

FabianEllenberger commented Aug 22, 2023

bitmonti commented Aug 22, 2023 via email • edited

FabianEllenberger commented Aug 24, 2023

FabianEllenberger commented Aug 31, 2023

Discussed in #1730

The Problem

A solution

luca-smartpricing commented Sep 5, 2023

provok-me commented Sep 6, 2023

luca-smartpricing commented Sep 7, 2023

BobbieGoede commented Dec 10, 2023

FabianEllenberger commented Dec 13, 2023

provok-me commented Jan 10, 2023 •

edited

motion-work commented Jan 16, 2023 •

edited

adriaandotcom commented Jan 23, 2023 •

edited

bitmonti commented May 19, 2023 •

edited

bitmonti commented Aug 22, 2023 via email •

edited