How to pass props to Prose components?

[goodpixels]

I'm using a custom <Text> component to render all copy on my website and I've created a <ProseP> wrapper component to use it with Nuxt Content, like so:

/components/content/ProseP.vue

<template>
    <Text variant="body"><slot /></Text>
</template>

This is my content file:

---
draft: false
title: Test article
---

This is the article excerpt. Read on to find out more.
<!--more-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus velit dolor, mattis ut molestie ut, rutrum sit amet est. Quisque eget viverra mi. In eu leo elit. Cras condimentum porta velit vel sagittis. Nullam rhoncus, velit in vehicula facilisis, leo erat tincidunt odio, at elementum sem ipsum ac dui. Suspendisse congue facilisis erat a sollicitudin. Duis egestas ac sapien id suscipit. Curabitur in scelerisque lectus. Maecenas id neque sagittis, tempus nisi sed, rutrum neque. Nam mollis convallis quam ac malesuada. Mauris consectetur pharetra tempor.

Suspendisse potenti. Vivamus elementum efficitur velit at auctor. Fusce tincidunt sem lacus, id scelerisque libero ultricies quis. Nulla id mauris non risus pellentesque luctus facilisis id odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nisl tortor, pellentesque quis dictum condimentum, ornare eleifend dolor. Duis ac felis eu nunc gravida auctor ac vel justo.

Nullam gravida id odio at suscipit. In est ex, ornare at facilisis ac, sodales id neque. Morbi nunc nibh, venenatis sit amet nulla at, commodo placerat urna. Integer massa lorem, tincidunt eu tincidunt a, aliquet quis odio. Ut laoreet nisl ut mi suscipit, sit amet efficitur risus tristique. Pellentesque tempor porta sapien, non viverra est rutrum ac. Morbi dictum dictum orci sit amet egestas. Sed sit amet scelerisque nisl. Aenean efficitur leo mauris, et fermentum urna consectetur vitae. Morbi lobortis vestibulum porta. Donec porttitor in sem in faucibus. Etiam sollicitudin magna id enim ullamcorper viverra. Curabitur vulputate mi id sapien fermentum malesuada. Morbi eget lorem arcu.

Now, the <ProseP> wrapper component works as expected, and all the paragraphs are rendered via my custom <Text> component.

How can I pass a prop to the <ProseP> component to change the size of the text for the excerpt only?

I tried creating another wrapper component, called <Excerpt>, but it didn't work as expect, as it still renders the <ProseP> component inside:

/components/content/Excerpt.vue

<template>
  <Text variant="huge"><slot /></Text>
</template>

I also tried passing inline props via Markdown document, but it didn't work:

---
draft: false
title: Test article
---

This is the article excerpt. Read on to find out more.{variant="huge"}
<!--more-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus velit dolor, mattis ut molestie ut, rutrum sit amet est. Quisque eget viverra mi. In eu leo elit. Cras condimentum porta velit vel sagittis. Nullam rhoncus, velit in vehicula facilisis, leo erat tincidunt odio, at elementum sem ipsum ac dui. Suspendisse congue facilisis erat a sollicitudin. Duis egestas ac sapien id suscipit. Curabitur in scelerisque lectus. Maecenas id neque sagittis, tempus nisi sed, rutrum neque. Nam mollis convallis quam ac malesuada. Mauris consectetur pharetra tempor.

Suspendisse potenti. Vivamus elementum efficitur velit at auctor. Fusce tincidunt sem lacus, id scelerisque libero ultricies quis. Nulla id mauris non risus pellentesque luctus facilisis id odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nisl tortor, pellentesque quis dictum condimentum, ornare eleifend dolor. Duis ac felis eu nunc gravida auctor ac vel justo.

Nullam gravida id odio at suscipit. In est ex, ornare at facilisis ac, sodales id neque. Morbi nunc nibh, venenatis sit amet nulla at, commodo placerat urna. Integer massa lorem, tincidunt eu tincidunt a, aliquet quis odio. Ut laoreet nisl ut mi suscipit, sit amet efficitur risus tristique. Pellentesque tempor porta sapien, non viverra est rutrum ac. Morbi dictum dictum orci sit amet egestas. Sed sit amet scelerisque nisl. Aenean efficitur leo mauris, et fermentum urna consectetur vitae. Morbi lobortis vestibulum porta. Donec porttitor in sem in faucibus. Etiam sollicitudin magna id enim ullamcorper viverra. Curabitur vulputate mi id sapien fermentum malesuada. Morbi eget lorem arcu.

How can I style the excerpt differently?

Many thanks.

[nobkd]

I don't completely understand, what you want, but I think you're looking for the <ContentSlot> component

(A live reproduction with for example Stackblitz would have been helpful)

---

In your excerpt / text component, you might need the content slot, maybe like this:

<ContentSlot :use="$slots.default" unwrap="p" />

And, if your Text component is globally available (e.g., in the components/content directory), you could use the MDC syntax to use it directly in Markdown and set the props:

::text{variant="huge"}
your text
::

[goodpixels]

This worked! Thank you so much! <3