N
Nuxt•2mo ago
joetora

MDC component prop binding not working in v3 - arrays/objects from frontmatter not passed correctly

In Nuxt Content v2 I was able to use MDC component prop binding from the frontmatter of a markdown file to pass objects and arrays. However, with v3 that doesn't seem to work. content/markdown.md 
---
cardsContent:
  - heading: First Option
    subTitle: Description of the first option
    icon: fa6-solid:star
  - heading: Second Option
    subTitle: Description of the second option
    icon: fa6-solid:heart
  - heading: Third Option
    subTitle: Description of the third option
    icon: fa6-solid:check
---

# Example Page Title

::step-by-step-content
Choose as many as you like.

:::example-card{:cardsContent="cardsContent"}
:::

::
---
cardsContent:
  - heading: First Option
    subTitle: Description of the first option
    icon: fa6-solid:star
  - heading: Second Option
    subTitle: Description of the second option
    icon: fa6-solid:heart
  - heading: Third Option
    subTitle: Description of the third option
    icon: fa6-solid:check
---

# Example Page Title

::step-by-step-content
Choose as many as you like.

:::example-card{:cardsContent="cardsContent"}
:::

::
components/content/ExampleCard.vue 
<template>
  <div class="grid">
    <div v-for="item in cardsContent" :key="item.heading" class="card">
      <h3>{{ item.heading }}</h3>
      <p v-if="item.subTitle">{{ item.subTitle }}</p>
      <Icon v-if="item.icon" :name="item.icon" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  cardsContent: {
    type: Array,
    required: true
  },
})
</script>
<template>
  <div class="grid">
    <div v-for="item in cardsContent" :key="item.heading" class="card">
      <h3>{{ item.heading }}</h3>
      <p v-if="item.subTitle">{{ item.subTitle }}</p>
      <Icon v-if="item.icon" :name="item.icon" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  cardsContent: {
    type: Array,
    required: true
  },
})
</script>
Expected behaviour: The cardsContent prop receives the actual array with 3 objects and the component renders 3 cards with headings, subtitles, and icons. Error: Invalid prop: type check failed for prop "cardsContent". Expected Array, got String with value "cardsContent" I do notice in the Nuxt Content docs - https://content.nuxt.com/docs/files/markdown#props - there is this section:
If you want to pass arrays or objects as props to components you can pass them as JSON string and prefix the prop key with a colon to automatically decode the JSON string. Note that in this case you should use single quotes for the value string so you can use double quotes to pass a valid JSON string:
I did try single quotes to no avail. Is it still possible to pass arrays/objects from frontmatter into Markdown components in Nuxt Content v3?
Nuxt Content
Markdown
Create and query Markdown files in your Nuxt applications and use the MDC syntax to integrate Vue components.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @joetora. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt Content v3, the recommended way to pass arrays or objects as props to MDC components is to use a JSON string and prefix the prop key with a colon (:), as described in the documentation. The value must be a valid JSON string, and you should use single quotes around the value so you can use double quotes inside the JSON. For example: 
::example-card{:cardsContent='[{"heading":"First Option","subTitle":"Description of the first option","icon":"fa6-solid:star"},{"heading":"Second Option","subTitle":"Description of the second option","icon":"fa6-solid:heart"},{"heading":"Third Option","subTitle":"Description of the third option","icon":"fa6-solid:check"}]'}
::
::example-card{:cardsContent='[{"heading":"First Option","subTitle":"Description of the first option","icon":"fa6-solid:star"},{"heading":"Second Option","subTitle":"Description of the second option","icon":"fa6-solid:heart"},{"heading":"Third Option","subTitle":"Description of the third option","icon":"fa6-solid:check"}]'}
::
This approach works because the MDC parser will decode the JSON string and pass it as an array to your component. Passing the name of a frontmatter variable (e.g., :cardsContent="cardsContent") does not work for arrays/objects in v3; it will pass the string "cardsContent" instead of the actual data, as you observed. The documentation does not mention support for directly binding complex frontmatter variables (like arrays/objects) to component props using the :prop="frontmatterVar" syntax in v3. Only the JSON string method is documented and supported for such cases Props in MDC syntax. Summary:
- You must pass arrays/objects as JSON strings using the {:prop='[JSON]'} syntax. - Direct binding from frontmatter (e.g., :cardsContent="cardsContent") is not supported for arrays/objects in v3. If you need to keep your data in the frontmatter for reusability, you may need to duplicate it as a JSON string in the MDC block, or consider alternative approaches such as injecting data via the <ContentRenderer>'s data prop if you are rendering the content programmatically Binding Data. I'm sorry, but there is no information in the knowledge sources indicating that direct frontmatter variable binding for arrays/objects is supported in Nuxt Content v3. Only the JSON string method is documented and supported. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@732992172646858873> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?