Mdx: Add Nuxt module for MDX

[codebender828]

Add a Nuxt.js module to make MDX usage in Nuxt convenient in Nuxt.js

Currently I'm using MDX with Nuxt. The doesn't come without the usual gymnastics of having to create a custom router to load the MDX files for pages.

Problem

Nuxt's builder will ignore all non .vue files in the pages directory by default. In order to make this more convenient, we need to load the files programmatically inside a module.

After exploring this extensively I found that this cannot be done easily in user-land.

Expected behavior

The outcome should look something like the image shown below. MDX files are loaded seamlessly into Nuxt's builder.

Alternatives

What are the alternative solutions? Please describe what else you have considered?

• Create your own custom router with this kind of gymnastics.
• Manually create module in user land (Non beginner-friendly.)

[codebender828]

Hey, @wooorm !

Was able whip up something for this. Will be submitting a PR to the nuxt-community organization on Github for this. We can link to it in the README perhaps? Any thoughts?

There's the source code: https://github.com/codebender828/mdx-module

[wooorm]

I really have no experience with nuxt and almost none with react/vue, so I’m not the best person to speak on this.

Unfortunately we don’t yet list integrations on the readme. I think we should do that. Or maybe a new section on the website, under Getting Started, for Vue?

[codebender828]

Yes. An easy way for people looking to get started with other integrations will be beneficial. I would suggest a page in the docs and in the readme. 🙏

[wooorm]

@codebender828 Is this something you could work on? Or someone else willing to submit a PR listing integrations in the readme?