How do I render a partial in Markdown content using Nuxt Content?

Question

In Nuxt Content, we can create and declare Markdown partials by prefixing the file name with an underscore, as described here: https://content.nuxtjs.org/guide/writing/content-directory#partials

However, the documentation contains no information on how to actually use these partials, besides mentioning that they can be queried for through the JS API.

What I would expect is the ability to easily render these partials inline from other Markdown content, such that the partials can be used for frequently reused fragments of content, to avoid duplicating said content.

How can I render a Markdown partial from inside another Markdown file?

Answer 1

There is no nuxt way to do this by you can implement one.

Create a Vue component in components/content named Partial.vue. Paste this in your Partial.vue file to render markdown content:

<template>
    <div>
        <ContentQuery :path="`/_partials/${content}`" find="one" v-slot="{ data }">
            <ContentRenderer :value="data">
                <template #empty>
                    <p>No content found.</p>
                </template>
            </ContentRenderer>
        </ContentQuery>
    </div>
</template>

<script setup>
defineProps({
    content: {
        default: "default"
    }
});
</script>

Create a partial markdown content which you want to frequently re-use later in content/_partials/resue.md:

Hi, This markdown file contains **reusable** content.

Now, in your markdown content files, you can re-use the content of reuse.md by calling this MDC component. For example, in your a-blog-post.md file, paste this:

::partial{content=reuse}

Now, wherever you call this MDC partial, you will get this displayed:

Hi, This markdown file contains reusable content.