@nuxtjs/mdx
v1.0.0
Published
MDX module for Nuxt.js
Downloads
55
Keywords
Readme
@nuxtjs/mdx
Features
- Import
.mdx
files as Vue components - Import Vue components in your
.mdx
files - Replace markdown elements with Vue components with the MDX Provider.
Setup
- Add
@nuxtjs/mdx
dependency to your project
yarn add --dev @nuxtjs/mdx # or npm install --dev @nuxtjs/mdx
- Add
@nuxtjs/mdx
to thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
'@nuxtjs/mdx'
]
}
Usage
After installing the @nuxtjs/mdx
module, you're ready to start using MDX files in your Nuxt app. The @nuxtjs/mdx
module picks up all .mdx
files used in your Nuxt app and converts them into Vue components. This makes it possible to use MDX files as Nuxt routes and regular components.
Using .mdx
files in ~/pages
directory
Start by creating a hello.mdx
file in your ~/pages
directory.
pages/
index.vue
hello.mdx
Inside hello.mdx
, add some markdown content:
# Hello Nuxt MDX
<section
id="mdx-nuxt-section"
style={{
color: 'white',
backgroundColor: 'tomato',
padding: '3rem'
}}
>
This a Nuxt MDX tomato.
</section>
<nuxt-link to="/some/path">
to some page →
</nuxt-link>
After starting your app server, you can now view your rendered hello.mdx
page at localhost:3000/hello
🎉
Importing .mdx
files in Vue components
You can also import .mdx
files as inside other Vue components.
<template>
<div>
<!-- 👇🏽 MDX file is parsed as Vue component -->
<MyMDXComponent />
</div>
</template>
<script>
import MyMDXComponent from '~/components/MyMDXComponent.mdx'
export default {
components: {
MyMDXComponent
}
}
</script>
Development
- Clone this repository
- Install dependencies using
yarn
- Start development server using
yarn dev
License
Copyright (c) Jonathan Bakebwa [email protected]
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!