Vue Support

Hey guys, I’m in love with this library. Its super cool and easy to use. I use Vue in my day job, and I would really love to be able to write some component docs with this, because as far as I know - there is nothing in the Vue world for this, even though we have JSX.

I think its because of the differences that Vue needs, in comparison to being able to define a functional React component that makes it slightly non-trivial? I’m rusty with my parsers, so not sure how another layer of abstraction ontop of parsing with deciding to use a JSX outputter is.

i.e.

export default {
  render() {
    return <div>Hello World</div>;
  }
};

in comparison to:

const MyComponent = () => <div>Hello World</div>

I miss React. 😃 Would love to understand whether it was possible or not.

Thanks guys!

[brennj]

The markdown file:

import Test from './Test.vue';

# Hello World!

This is great!
_No React here!_

<Test />

Really enjoyed this! Surprised it works!!

I’m exhausted so won’t get the PR just today - will do during the week, but basically the API I have proposed will look like this:

const { VueJSXCompiler } = require('@mdx-js/vue-plugin-mdx');
....
    module: {
      rules: [
        ...
        {
          test: /.mdx?$/,
          use: ['babel-loader', {
            loader: '@mdx-js/loader',
            options: {
              compilers: [VueJSXCompiler]
            }
          }],
        }
      ]
    }

So it means that a new package called @mdx-js/vue-plugin-mdx would be added. Theres also some knowledge of it in the loader in order to know whether to render Vue stuff or React stuff.

I’ll need to look at the code with fresh eyes during the week before I open the PR. I’m sure I’ve duplicated one too many things.

[codebender828]

Hey @calaoa ! Yes it’s possible to consume Vue components in your MDX files. You’d need to consume it as JSX in your MDX file.

Here’s an example of how consume Vue components in MDX files.

(This is an old demo but works. I made this when I was working on adding support for Vue.js. All functionality is already added to the MDX package.) Demo: https://mdx-vue.now.sh/