How to render markdown in a component?

[Zezombye]

I have a Footnote component which is essentially expanded text:

<template>
    <span class="footnote" @click="isExpanded = !isExpanded" :class="{ 'expanded': isExpanded }">
        <span v-if="!isExpanded">{{ unexpandedText }}</span>
        <span v-else v-html='text'></span>
    </span>
</template>

This makes it so I can write stuff such as Some point <Footnote unexpandedText="(...)" text="(Unnecessary details)/>. However, I would like to render markdown inside the component, so that I can write <Footnote text="**bold**"/>.

This comment doesn't work for me, as it cannot find the imports (which apparently don't work in client side?)

Is there a way that I can make the component render markdown (ideally including the plugins I've added to it)? Thanks

[brc-dd]

Not possible currently. The markdown renderer needs Node.js dependencies, it won't work on client. Might be better to use some plugin like https://github.com/markdown-it/markdown-it-footnote to render footnotes.

[Zezombye]

Right. Or I guess for my use case it would be better not to make a Vue component, but to add new markdown syntax. I'll look into how that plugin is implemented, thanks!