Add support for Vue components in Markdown files

[gridsome]

Add support for Vue components in Markdown files

[hjvedvik]

We have been working on a plugin which lets you use Vue components in markdown files. It will run all the markdown files through webpack, so it is not like a source plugin. But it can be a replacement for the components in src/pages or be used for a documentation section etc. The syntax will be like this:

---
title: A cool title
---
import MdComponent from '~/components/MdComponent.md'
import VueComponent from '~/components/VueComponent.vue'
import data from '~/data.json'

# {{ $frontmatter.title }}

<MdComponent :option="data.option"/>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<VueComponent>{{ data.text }}</VueComponent>

The plugin also uses the @gridsome/transformer-remark under the hood so you will be able to use @gridsome/remark-prismjs etc. The script, style, page-query and static-query blocks will also work as in Vue components.

[hjvedvik]

Yes, that would be powerful. I think there are two ways this could be achieved. Either by running all the markdown files through Vue loader and transform them into Single File Components in a source plugin. Or by server-side rendering them in a Remark transformer plugin and then hydrate the markup in the browser. Right now it's not possible but we will see if we can make it work before v1.0.

[SteveEdson]

Perfect. Let me know as soon as I can test it please, it'd be great to have this feature available.

[hjvedvik]

@danrocha No, it isn't. We are working on a plugin which makes it possible. It will work like in my comment above. The main difference between that plugin and the filesystem plugin is that it will compile each markdown file with webpack to generate HTML markup that can be hydrated by Vue in the browser. I'm not sure how well it will perform for very large blogs etc but should be perfect for documentation sites or smaller blogs.

[hjvedvik]

@SteveEdson @danrocha Just created a PR #424 for the plugin. Any feedback would be appreciated.

[hjvedvik]

It's not based on mdx. It simply transforms the markup into a single file component and lets the vue-loader handle the rest. So it will only support the same syntax as in a Vue template plus markdown. And it only supports the import statement for importing components or data, no export.

There are several things we want to improve in core before merging it, but we can probably open a PR that can be tested soon :)

[lobo-tuerto]

Also, I don't know if this can help, but I'll leave it here:

https://github.com/egoist/vmark

[danrocha]

Could definitely be worthwhile. I am surprised this is not a more frequently requested feature. I was halfway building my blog in Gridsome but had to move Vuepress because of the lack of Vue-in-Markdown support in it. And I would gladly come back to Gridsome if it were ever implemented...

is this really an edge use case?

[callumflack]

FYI, MDX has Vue support.

Could be worthwhile describing the method as there seems to be many caveats & differences in approach around using "reactive javascript" components in markdown between Nuxtent (which finally has some progress), vmark and bespoke solutions (in Vue), and MDX.

[lobo-tuerto]

This one does Markdown + frontmatter to Vue SFCs:
https://github.com/hmsk/frontmatter-markdown-loader

[SteveEdson]

Would it be possible to just get this working client-side only as an interim solution? If I register the component as a global component, ie:

Vue.component('HelloWorld', HelloWorld);

It's just being left in the DOM as

<hello-world></hello-world>

It'd be great if that could be rendered in the traditional way.

[SteveEdson]

This sounds perfect. Is this essentially .mdx support?

Is it possible to help test this plugin out now?

[janvorisek]

Great work on the PR #424 so far.

I'm curious if anyone got Vue SFC working in the content files. Possibly without using markdown?
I'd sacrifice Markdown support in blog post content files for the ability to use components.

[Zyles]

Also looking for vue component support in Markdown files.

Articles and content is more than text nowadays and we need to fit content blocks, ads and what not between the text.

[hacknug]

This should be possible as of v0.7 https://gridsome.org/blog/2019/09/17/gridsome-v07/#vue-remark-plugin