Nuxt•5w ago

<MDC />

Component fail to display data upon changing locale with @nuxtjs/i18n @nuxt/content and @nuxt/ui.

<UPageSection :title="pricingPage.faq.title">
  <template #description>
    <MDC :value="pricingPage.faq.description" unwrap="p" />
  </template>
</UPageSection>

<UPageSection :title="pricingPage.faq.title">
  <template #description>
    <MDC :value="pricingPage.faq.description" unwrap="p" />
  </template>
</UPageSection>

Other values from .yml content file working fine. This value on the MDC tag however appear ok on refresh but not on locale change. On locale change the values is missing. Please advise. tq

3 Replies

kapa.ai•5w ago

Hi @Nawi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, your issue—where the <MDC /> component displays content on refresh but not after a locale change with @nuxtjs/i18n and @nuxt/content—suggests a reactivity or data-fetching problem when the locale changes. Key points from the docs: - When using Nuxt Content with @nuxtjs/i18n, you should refetch or recompute your content whenever the locale changes. This is typically handled by watching the locale and updating the data accordingly. - In the official example for dynamic content loading, the content is fetched inside a composable or useAsyncData with a dependency on locale, ensuring it updates when the locale changes:

  const { data: page } = await useAsyncData('page-' + slug.value, async () => {
    // Build collection name based on current locale
    const collection = ('content_' + locale.value) as keyof Collections
    const content = await queryCollection(collection).path(slug.value).first()

    // Optional: fallback to default locale if content is missing
    if (!content && locale.value !== 'en') {
      return await queryCollection('content_en').path(slug.value).first()
    }

    return content
  }, {
    watch: [locale], // Refetch when locale changes
  })

  const { data: page } = await useAsyncData('page-' + slug.value, async () => {
    // Build collection name based on current locale
    const collection = ('content_' + locale.value) as keyof Collections
    const content = await queryCollection(collection).path(slug.value).first()

    // Optional: fallback to default locale if content is missing
    if (!content && locale.value !== 'en') {
      return await queryCollection('content_en').path(slug.value).first()
    }

    return content
  }, {
    watch: [locale], // Refetch when locale changes
  })

This ensures that when the locale changes, the content is refetched and the UI updates accordingly Nuxt Content i18n Integration. What might be happening in your case: - If pricingPage.faq.description is not being refetched or updated when the locale changes, <MDC :value="..."/> will not receive the new value, and thus nothing is displayed. - Other values may work if they are directly reactive or not dependent on async content loading. How to fix: - Ensure that the data source for pricingPage is reactive to locale changes. If you are using useAsyncData or a similar composable, add watch: [locale] so that the data is refetched when the locale changes. - If you are loading content statically or outside of a reactive context, move the loading logic into a composable or use useAsyncData with the correct dependencies. Example fix:

const { locale } = useI18n()
const { data: pricingPage } = await useAsyncData('pricingPage-' + locale.value, () => {
  // Fetch the correct content for the current locale
  return queryCollection('your_collection').where({ /* ... */ }).first()
}, {
  watch: [locale], // This ensures reactivity
})

const { locale } = useI18n()
const { data: pricingPage } = await useAsyncData('pricingPage-' + locale.value, () => {
  // Fetch the correct content for the current locale
  return queryCollection('your_collection').where({ /* ... */ }).first()
}, {
  watch: [locale], // This ensures reactivity
})

Then, use pricingPage.value.faq.description in your template. Summary:
The issue is likely due to the content not being refetched or updated when the locale changes. Make sure your data fetching logic is reactive to the locale, as shown in the official Nuxt Content + i18n integration example Nuxt Content i18n Integration. If you follow this pattern, the <MDC /> component should update its content correctly on locale change. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@969851557954879488> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NawiOP•5w ago

Yes it is reactive. Ive tried both with watch[locale] and without. The only non-reactive is the MDC component that is seems to be not async, slow or need more time to render.

Gaming

Programming

<MDC />

Did you find this page helpful?