How to pass props to component embedded in markdown?

I have some Vue components inside my nuxt/content markdown:

hello.md:

== Title
<my-component :foo="bar"></my-component>
More text

How do I assign a value to “bar”? It’s straightforward if bar is a constant, and there’s also a method to create a variable in the frontmatter to pass to the component. What I can’t figure out is how to pass in a value from the outer component or page that contains the <nuxt-content> component.

Here’s what doesn’t work:

• Putting something in data() in the outer component
• Adding a prop to <nuxt-content> itself: <nuxt-content :foo="bar">
• Adding a property to the value that gets passed in :document
• Trying to play games in the front matter

I think it might work to use a global variable, this.$foo="bar", but that is obviously bad practice.

[NozomuIkuta]

@ccleve

You can pass props from outside NuxtContent component to components written in markdown files, in the 3rd way you described:

Adding a property to the value that gets passed in :document

Here is demo in CodeSandbox.

But, if you are talking about Nuxt Content Theme Doc, there is no way you extend page object fetched, except patching the package.

[ManasMadrecha]

@NozomuIkuta Amazing 😄 This should be documented on the website.