Use Vue components in your Markdown files with Nuxt content

Have you ever wanted to use Vue components inside a markdown file? Because Nuxt content allows you to do just that! This joining of component and markdown allows for a flexible system of rendering content, that can take into account the needs of style as well as simplicity of updates. Your component could remain the same in structure and style while you update the content, or vice versa.

Here’s an example of how the markdown file could look, as you reference your Vue component, <SiteHero />:

::site-hero
# Buy Our Super Awesome Product Today! 
::

Inside your markdown file you reference the Site Hero component with Nuxt content’s special syntax. Then you fill up your component with whatever content you want it to have.

There are a few configuration requirements for this functionality to work out of the box.

Your component must use a slot for the content of the markdown file that goes inside the component. The component can really be as simple or complex as you like, as long as there’s a slot for the content to live in. Here’s an example of what that could look like:

<template>
    <div class="awesome-hero-component">
        <h1>
            <!-- this is where my content will live! -->
            <slot />
        </h1>
    </div>
</template>

That’s it! And it will render a little something like this:

As another config requirement, your component must live in the components/content directory, so Nuxt content knows where to find it.

And that’s all! I’m excited about the possibilities for updating content that are offered by this feature. Let me know if you’ve ever thought about using Vue components and markdown together.