Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for Vue components in Markdown files #39

Closed
lobo-tuerto opened this issue Nov 14, 2018 · 15 comments
Assignees

Comments

@lobo-tuerto
Copy link

@lobo-tuerto lobo-tuerto commented Nov 14, 2018

Hello,

I have this use case:
I'd like to be able to use Vue components inside Markdown files.

Example (this is not currently working):

src/components/Hello.vue

<template lang="pug">
p Hello component!
</template>

src/templates/Post.vue

<template lang="pug">
layout
  div(v-html="$page.post.content")
</template>

<page-query>
query Post ($path: String!) {
  post: post (path: $path) {
    title
    content
  }
}
</page-query>

<script>
import Hello from '@/components/Hello.vue'

export default {
  components: { Hello },
  metaInfo () {
    return {
      title: this.$page.post.title
    }
  }
}
</script>

blog/first-post.md

---
slug: first-post
title: This is my first post!
---

# This is some first level title

* Bullet point #12
* Bullet point #2
* Bullet point #3

## This is a second level title

> This is a blockquote

<Hello />

gridsome.config.js

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'Post',
        route: '/blog/:slug'
      }
    }
  ]
}

Hello component! is not being rendering on /blog/first-post.

Is this possible? or easily achievable?
I think this feature could be a very powerful addition.

Cheers,
VA

@hjvedvik

This comment has been minimized.

Copy link
Member

@hjvedvik hjvedvik commented Nov 14, 2018

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.

@lobo-tuerto

This comment has been minimized.

Copy link
Author

@lobo-tuerto lobo-tuerto commented Nov 14, 2018

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

https://github.com/egoist/vmark

@lobo-tuerto

This comment has been minimized.

Copy link
Author

@lobo-tuerto lobo-tuerto commented Nov 14, 2018

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

@SteveEdson

This comment has been minimized.

Copy link
Member

@SteveEdson SteveEdson commented Feb 21, 2019

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.

@hjvedvik

This comment has been minimized.

Copy link
Member

@hjvedvik hjvedvik commented Feb 21, 2019

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.

@SteveEdson

This comment has been minimized.

Copy link
Member

@SteveEdson SteveEdson commented Feb 21, 2019

This sounds perfect. Is this essentially .mdx support?

Is it possible to help test this plugin out now?

@hjvedvik

This comment has been minimized.

Copy link
Member

@hjvedvik hjvedvik commented Feb 21, 2019

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 :)

@SteveEdson

This comment has been minimized.

Copy link
Member

@SteveEdson SteveEdson commented Feb 21, 2019

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

@hjvedvik hjvedvik self-assigned this Feb 21, 2019
@callumflack

This comment has been minimized.

Copy link

@callumflack callumflack commented May 2, 2019

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.

@danrocha

This comment has been minimized.

Copy link

@danrocha danrocha commented May 13, 2019

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?

@hjvedvik

This comment has been minimized.

Copy link
Member

@hjvedvik hjvedvik commented May 13, 2019

@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

This comment has been minimized.

Copy link
Member

@hjvedvik hjvedvik commented May 14, 2019

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

@janvorisek

This comment has been minimized.

Copy link

@janvorisek janvorisek commented Aug 6, 2019

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

This comment has been minimized.

Copy link

@Zyles Zyles commented Aug 29, 2019

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 comment has been minimized.

Copy link

@hacknug hacknug commented Sep 18, 2019

@hjvedvik hjvedvik closed this Sep 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.