Nuxt•9mo ago

Rendering Markdown Content

Hi, I want to know if it is possible to render portions of a markdown file to different locations of the same Vue file. Can it be done? I am using Nuxt Content.

<template>
    <div>
        <!-- Place markdown content here -->
    </div>
    <div>
        <!-- Place a portion of the markdown content here -->
    </div>
</template>

<template>
    <div>
        <!-- Place markdown content here -->
    </div>
    <div>
        <!-- Place a portion of the markdown content here -->
    </div>
</template>

1 Reply

Single•9mo ago

Absolutely. You can use slots like this: your-component.vue:

<template>
    <div>
        <!-- Place markdown content here -->
        <slot name="a" />
    </div>
    <div>
        <!-- Place a portion of the markdown content here -->
        <slot name="b" />
    </div>
</template>

<template>
    <div>
        <!-- Place markdown content here -->
        <slot name="a" />
    </div>
    <div>
        <!-- Place a portion of the markdown content here -->
        <slot name="b" />
    </div>
</template>

And in your content file:

::your-component
---
#a
This goes to a
#b
this goes to b
---
::

::your-component
---
#a
This goes to a
#b
this goes to b
---
::

Gaming

Programming

Rendering Markdown Content