├── .all-contributorsrc ├── .changeset ├── README.md ├── config.json └── popular-carrots-tease.md ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── CODE_OF_CONDUCT.md ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── ci.yml ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── commitlint.config.js ├── docs ├── README.md ├── components │ └── global │ │ └── hello.mdx ├── content │ ├── en │ │ ├── advanced │ │ │ └── mapping-html-to-vue.md │ │ ├── examples │ │ │ ├── basic-usage.md │ │ │ └── mdx-provider.md │ │ ├── guide │ │ │ ├── setup.md │ │ │ └── usage.md │ │ └── index.md │ └── settings.json ├── nuxt.config.js ├── package.json ├── static │ ├── icon.png │ ├── logo-dark.svg │ ├── logo-light.svg │ ├── preview-dark.png │ └── preview.png ├── tailwind.config.js └── yarn.lock ├── example ├── components │ └── comp.mdx ├── nuxt.config.js └── pages │ ├── import.vue │ ├── index.vue │ └── test.mdx ├── husky.config.js ├── jest.config.js ├── lib └── module.js ├── package.json ├── renovate.json ├── test └── module.test.js └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "Atinux", 10 | "name": "Sébastien Chopin", 11 | "avatar_url": "https://avatars2.githubusercontent.com/u/904724?v=4", 12 | "profile": "https://atinux.com", 13 | "contributions": [ 14 | "code" 15 | ] 16 | }, 17 | { 18 | "login": "pi0", 19 | "name": "pooya parsa", 20 | "avatar_url": "https://avatars0.githubusercontent.com/u/5158436?v=4", 21 | "profile": "https://github.com/pi0", 22 | "contributions": [ 23 | "code" 24 | ] 25 | }, 26 | { 27 | 28 | "login": "codebender828", 29 | "name": "Jonathan Bakebwa", 30 | "avatar_url": "https://avatars2.githubusercontent.com/u/21237954?v=4", 31 | "profile": "https://jbakebwa.dev", 32 | "contributions": [ 33 | "code" 34 | ] 35 | } 36 | ], 37 | "contributorsPerLine": 7, 38 | "projectName": "mdx-module", 39 | "projectOwner": "codebender828", 40 | "repoType": "github", 41 | "repoHost": "https://github.com", 42 | "skipCi": true 43 | } 44 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@1.3.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "linked": [], 6 | "access": "restricted", 7 | "baseBranch": "master", 8 | "updateInternalDependencies": "patch", 9 | "ignore": [] 10 | } -------------------------------------------------------------------------------- /.changeset/popular-carrots-tease.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@nuxtjs/mdx": major 3 | --- 4 | 5 | Release initial version of @nuxtjs/mdx 6 | 7 | - No breaking changes 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Common 2 | node_modules 3 | dist 4 | .nuxt 5 | coverage 6 | 7 | # Plugin 8 | lib/plugin.js 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | extends: [ 8 | '@nuxtjs' 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at excellence@jbakebwa.dev. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | ## Motivation and Context 7 | 8 | 9 | 10 | ## How Has This Been Tested? 11 | 12 | 13 | 14 | 15 | ## Screenshots (if appropriate): 16 | 17 | ## Types of changes 18 | 19 | - [ ] Bug fix (non-breaking change which fixes an issue) 20 | - [ ] New feature (non-breaking change which adds functionality) 21 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 22 | 23 | ## Checklist: 24 | 25 | 26 | - [ ] My code follows the code style of this project. 27 | - [ ] My change requires a change to the documentation. 28 | - [ ] I have updated the documentation accordingly. 29 | - [ ] I have added tests to cover my changes. 30 | - [ ] All new and existing tests passed. 31 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | ci: 13 | runs-on: ${{ matrix.os }} 14 | 15 | strategy: 16 | matrix: 17 | os: [ubuntu-latest, macos-latest, windows-latest] 18 | node: [10, 12] 19 | 20 | steps: 21 | - uses: actions/setup-node@v1 22 | with: 23 | node-version: ${{ matrix.node }} 24 | 25 | - name: checkout 26 | uses: actions/checkout@master 27 | 28 | - name: cache node_modules 29 | uses: actions/cache@v2 30 | with: 31 | path: node_modules 32 | key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }} 33 | 34 | - name: Install dependencies 35 | if: steps.cache.outputs.cache-hit != 'true' 36 | run: yarn 37 | 38 | - name: Lint 39 | run: yarn lint 40 | 41 | - name: Test 42 | run: yarn test 43 | 44 | - name: Coverage 45 | uses: codecov/codecov-action@v1 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_Store 8 | coverage 9 | dist 10 | **/sw.js 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Jonathan Bakebwa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![@nuxtjs/mdx](https://mdx.nuxtjs.org/preview.png)](https://mdx.nuxtjs.org) 2 | 3 | # @nuxtjs/mdx 4 | 5 | [![npm version][npm-version-src]][npm-version-href] 6 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 7 | [![Github Actions CI][github-actions-ci-src]][github-actions-ci-href] 8 | [![Codecov][codecov-src]][codecov-href] 9 | [![License][license-src]][license-href] 10 | 11 | > [MDX](https://mdxjs.com) module for [Nuxt 2](https://nuxt.com) 12 | 13 | - [✨  Release Notes](https://mdx.nuxtjs.org/releases) 14 | - [📖  Documentation](https://mdx.nuxtjs.org) 15 | 16 | ## Features 17 | 18 | - Import `.mdx` files as Vue components 19 | - Import Vue components in your `.mdx` files 20 | - Replace markdown elements with Vue components with the MDX Provider. 21 | 22 | ## Development 23 | 24 | 1. Clone this repository 25 | 2. Install dependencies using `yarn` 26 | 3. Start development server using `yarn dev` 27 | 28 | ## License 29 | 30 | [MIT License](./LICENSE) 31 | 32 | Copyright (c) Nuxt Community 33 | 34 | 35 | 36 | [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/mdx/latest.svg 37 | [npm-version-href]: https://npmjs.com/package/@nuxtjs/mdx 38 | 39 | [npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/mdx.svg 40 | [npm-downloads-href]: https://npmjs.com/package/@nuxtjs/mdx 41 | 42 | [github-actions-ci-src]: https://github.com/nuxt-community/mdx-module/workflows/ci/badge.svg 43 | [github-actions-ci-href]: https://github.com/nuxt-community/mdx-module/actions?query=workflow%3Aci 44 | 45 | [codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/mdx-module.svg 46 | [codecov-href]: https://codecov.io/gh/nuxt-community/mdx-module 47 | 48 | [license-src]: https://img.shields.io/npm/l/@nuxtjs/mdx.svg 49 | [license-href]: https://npmjs.com/package/@nuxtjs/mdx 50 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', { 5 | targets: { 6 | esmodules: true 7 | } 8 | } 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | '@commitlint/config-conventional' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # website 2 | 3 | ## Setup 4 | 5 | Install dependencies: 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ## Development 12 | 13 | ```bash 14 | yarn dev 15 | ``` 16 | 17 | ## Static Generation 18 | 19 | This will create the `dist/` directory for publishing to static hosting: 20 | 21 | ```bash 22 | yarn generate 23 | ``` 24 | 25 | To preview the static generated app, run `yarn start` 26 | 27 | For detailed explanation on how things work, checkout [nuxt/content](https://content.nuxtjs.org) and [@nuxt/content theme docs](https://content.nuxtjs.org/themes-docs). 28 | -------------------------------------------------------------------------------- /docs/components/global/hello.mdx: -------------------------------------------------------------------------------- 1 | # Hello Nuxt MDX 2 | 3 |
11 | This a Nuxt MDX tomato. 12 |
13 | 14 | 15 | back to setup page → 16 | 17 | -------------------------------------------------------------------------------- /docs/content/en/advanced/mapping-html-to-vue.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mapping HTML to Vue 3 | description: 'Nuxt MDX configure @mdx.vue and @mdx/vue-loader to map Vue components to HTML elements.' 4 | position: 4 5 | fullscreen: true 6 | category: Advanced 7 | --- 8 | 9 | `@nuxtjs/mdx` installs `@mdx/vue` and `@mdx/vue-loader` as dependencies in your project. Together they allow you to map Vue components to HTML elements based on the Markdown syntax. 10 | 11 | `@mdx/vue` exports the `MDXProvider` component that accepts an object with a map of all HTML elements you wish to be replaced with the corresponding component during rendering. 12 | 13 | ## Usage 14 | 15 | Suppose we have an `helloworld.mdx` file with a header element that we would like to replace with a component with it's own styles/interactions. 16 | 17 | ```md[helloworld.mdx] 18 | 19 | 20 | # Hello, Vue! 21 | ``` 22 | 23 | ### Defining components map 24 | 25 | First we create a map of components we would like to replace. This instructs the `@mdx/vue-loader` to replace all defined keys with the values in the object. 26 | 27 | 28 | 29 | Note the value is a function that provides all properties about the `h1` element from the `.mdx` file and returns a Vue component. You can also use the regular render function syntax if you prefer that to JSX. 30 | 31 | 32 | 33 | 34 | 35 | 36 | ```js [components.js] 37 | // In `components.js` file 38 | 39 | export default { 40 | h1: props => ({ 41 | render(h) { 42 | return ( 43 |

44 | {this.$slots.default} 45 |

46 | ) 47 | } 48 | }) 49 | } 50 | ``` 51 | 52 | 53 | 54 | 55 | ```js [components.js] 56 | // In `components.js` file 57 | 58 | export default { 59 | h1: props => ({ 60 | render(h) { 61 | return h('h1', { 62 | style: { 63 | color: 'tomato' 64 | }, 65 | ...props 66 | }, this.$slots.default) 67 | } 68 | }) 69 | } 70 | ``` 71 | 72 | 73 | 74 | 75 | ### Providing components map to `MDXProvider` 76 | Wrap your `helloworld.mdx` file component inside the `MDXProvider` from `@mdxjs/vue` and provide it your components map as a prop. 77 | 78 | We recommend doing it inside your Nuxt.js layout. 79 | 80 | ```vue [layouts/default.vue] 81 | 86 | 87 | 102 | ``` 103 | 104 | **Yields:** 105 | 106 | ```html 107 |

Hello, Vue!

108 | ``` 109 | 110 | ### Examples 111 | An good example of this use case are the Code blocks in the [Chakra UI Vue documentation](https://vue.chakra-ui.com). It uses the `MDXProvider` to replace regular codeblocks with live code snippets. 112 | 113 | - [Demo](https://vue.chakra-ui.com/button#button-variant) 114 | - [MDX file source](https://raw.githubusercontent.com/chakra-ui/chakra-ui-vue/54022981387f99304e4d6226b31f87d18d521f05/website/pages/button.mdx) 115 | - [Components map source](https://github.com/chakra-ui/chakra-ui-vue/blob/54022981387f99304e4d6226b31f87d18d521f05/website/components/CodeBlock.js#L12-L112) 116 | -------------------------------------------------------------------------------- /docs/content/en/examples/basic-usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Basic usage 3 | description: 'Live example of basic usage of Nuxt MDX on CodeSandbox' 4 | position: 5 5 | category: Examples 6 | fullscreen: true 7 | link: https://codesandbox.io/embed/mdx-provider-nuxt-1bsun?fontsize=14&hidenavigation=1&theme=dark&view=preview 8 | --- 9 | 10 | Minimal example of a Nuxt project with MDX. 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/content/en/examples/mdx-provider.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: MDX Provider 3 | description: 'Example of element mapping with the MDXProvider.' 4 | position: 6 5 | category: Examples 6 | fullscreen: true 7 | link: https://codesandbox.io/embed/mdx-provider-nuxt-1bsun?fontsize=14&hidenavigation=1&theme=dark 8 | --- 9 | 10 | Example of element mapping with the [MDXProvider](https://mdxjs.com/getting-started#mdxprovider). 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/content/en/guide/setup.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installation 3 | subtitle: 'Using MDX in your Nuxt project is only one command away.' 4 | position: 2 5 | category: Guide 6 | --- 7 | 8 | ## Installation 9 | 10 | > Requires a minimum Nuxt version of v2.10.0. See [nuxt/nuxt.js#5854](https://github.com/nuxt/nuxt.js/pull/5854) 11 | 12 | Add `@nuxtjs/mdx` as a development dependency to your project: 13 | 14 | 15 | 16 | 17 | ```bash 18 | yarn add --dev @nuxtjs/mdx 19 | ``` 20 | 21 | 22 | 23 | 24 | ```bash 25 | npm install --save-dev @nuxtjs/mdx 26 | ``` 27 | 28 | 29 | 30 | 31 | Then add it to the `buildModules` section of your `nuxt.config.js`: 32 | 33 | ```js{}[nuxt.config.js] 34 | export default { 35 | buildModules: ['@nuxtjs/mdx'] 36 | } 37 | ``` 38 | 39 | > If you are using nuxt < 2.9.0, use the `modules` property instead. 40 | 41 | That's it! You can now start writing MDX files in your Nuxt app ✨ 42 | -------------------------------------------------------------------------------- /docs/content/en/guide/usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Usage 3 | subtitle: "Using MDX files in your Nuxt app is easy." 4 | description: "With the @nuxtjs/mdx module, you're ready to start using MDX files in your Nuxt app." 5 | position: 3 6 | category: Guide 7 | --- 8 | 9 | The module picks up all `.mdx` files used in your Nuxt app and converts them into Vue components. Making possible to use MDX files as Nuxt pages and regular components. 10 | 11 | ## Write MDX pages 12 | 13 | Start by creating a `hello.mdx` file in your `~/pages` directory. 14 | 15 | ```[Application] 16 | pages/ 17 | index.vue 18 | hello.mdx 19 | ``` 20 | 21 | Inside `hello.mdx`, add some markdown content: 22 | 23 | ```md[hello.mdx] 24 | # Hello Nuxt MDX 25 | 26 |
34 | This a Nuxt MDX tomato. 35 |
36 | 37 | 38 | back to setup page → 39 | 40 | ``` 41 | 42 | **Result:** 43 | 44 |
45 | 46 |
47 | 48 | ## Import MDX files in Vue 49 | 50 | You can also import `.mdx` files as inside other Vue components. 51 | 52 | ```vue 53 | 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/content/en/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: 'Nuxt MDX allows you to write JSX in your Markdown documents in your Nuxt application.' 4 | position: 1 5 | category: '' 6 | features: 7 | - Import .mdx files as Vue components 8 | - Import Vue components in your .mdx files 9 | - Replace markdown elements with Vue components with the MDX Provider. 10 | --- 11 | 12 | 13 | 14 | 15 | `@nuxtjs/mdx` allows you to write JSX in your Markdown documents in your [Nuxt](https://nuxtjs.org) application with [MDX](https://mdxjs.com). 16 | 17 | ## Features 18 | 19 | 20 | 21 |

Enjoy light and dark mode: 

22 | 23 | ## About MDX 24 | 25 | To learn more about MDX please visit the [official documentation](https://mdxjs.com). 26 | -------------------------------------------------------------------------------- /docs/content/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Nuxt MDX", 3 | "url": "https://mdx.nuxtjs.org", 4 | "logo": { 5 | "light": "/logo-light.svg", 6 | "dark": "/logo-dark.svg" 7 | }, 8 | "github": "nuxt-community/mdx-module", 9 | "twitter": "@nuxt_js" 10 | } 11 | -------------------------------------------------------------------------------- /docs/nuxt.config.js: -------------------------------------------------------------------------------- 1 | import theme from '@nuxt/content-theme-docs' 2 | 3 | export default theme({ 4 | loading: { color: '#e29503' }, 5 | buildModules: [ 6 | '@nuxtjs/mdx', 7 | 'nuxt-ackee' 8 | ], 9 | ackee: { 10 | server: 'https://ackee.nuxtjs.com', 11 | domainId: '24b28f02-7ad1-434e-81c5-f8e3f00a297b', 12 | detailed: true 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdx-docs", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@nuxt/content-theme-docs": "^0.8.2", 13 | "@nuxtjs/mdx": "latest", 14 | "nuxt": "^2.14.11" 15 | }, 16 | "devDependencies": { 17 | "nuxt-ackee": "^2.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/mdx-module/f70ef59b5ad1a2cdf58978039d230b147262d5d5/docs/static/icon.png -------------------------------------------------------------------------------- /docs/static/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/static/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/static/preview-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/mdx-module/f70ef59b5ad1a2cdf58978039d230b147262d5d5/docs/static/preview-dark.png -------------------------------------------------------------------------------- /docs/static/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/mdx-module/f70ef59b5ad1a2cdf58978039d230b147262d5d5/docs/static/preview.png -------------------------------------------------------------------------------- /docs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: { 4 | colors: { 5 | primary: { 6 | 50: '#fff5db', 7 | 100: '#ffe4ae', 8 | 200: '#fed27e', 9 | 300: '#fcc04d', 10 | 400: '#fcae1d', 11 | 500: '#e29503', 12 | 600: '#b07400', 13 | 700: '#7f5300', 14 | 800: '#4c3200', 15 | 900: '#1d1000' 16 | } 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /example/components/comp.mdx: -------------------------------------------------------------------------------- 1 | ## MDX component 2 | 3 | I'm an MDX component. 4 | -------------------------------------------------------------------------------- /example/nuxt.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '..'), 5 | buildDir: resolve(__dirname, '.nuxt'), 6 | srcDir: __dirname, 7 | modules: [ 8 | { handler: require('../lib/module') } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /example/pages/import.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /example/pages/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /example/pages/test.mdx: -------------------------------------------------------------------------------- 1 | # Hello Nuxt MDX 2 | 3 |
4 | This a Nuxt MDX tomato. 5 |
6 | 7 | 8 | to import page → 9 | 10 | -------------------------------------------------------------------------------- /husky.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | hooks: { 3 | 'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS', 4 | 'pre-commit': 'yarn lint', 5 | 'pre-push': 'yarn lint' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: 'node', 3 | collectCoverage: true, 4 | collectCoverageFrom: [ 5 | 'lib/**/*.js', 6 | '!lib/plugin.js' 7 | ], 8 | moduleNameMapper: { 9 | '^~/(.*)$': '/lib/$1', 10 | '^~~$': '', 11 | '^@@$': '', 12 | '^@/(.*)$': '/lib/$1' 13 | }, 14 | transform: { 15 | '^.+\\.js$': 'babel-jest' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/module.js: -------------------------------------------------------------------------------- 1 | module.exports = function (moduleOptions) { 2 | const { options } = this 3 | 4 | const { extensions } = options 5 | if (extensions && !extensions.includes('mdx')) { 6 | extensions.push('mdx') 7 | } 8 | 9 | const { additionalExtensions } = options.build 10 | if (additionalExtensions && !additionalExtensions.includes('mdx')) { 11 | additionalExtensions.push('mdx') 12 | } 13 | 14 | this.extendBuild((config) => { 15 | if (!config.resolve.extensions.includes('.mdx')) { 16 | config.resolve.extensions.push('.mdx') 17 | } 18 | 19 | const jsxRuleLoaders = config.module.rules.find(r => r.test.test('.jsx')).use 20 | const babelLoader = jsxRuleLoaders[jsxRuleLoaders.length - 1] 21 | 22 | config.module.rules.push({ 23 | test: /\.mdx$/, 24 | use: [ 25 | babelLoader, 26 | '@mdx-js/vue-loader' 27 | ] 28 | }) 29 | }) 30 | } 31 | 32 | module.exports.meta = require('../package.json') 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nuxtjs/mdx", 3 | "version": "1.0.0", 4 | "description": "MDX module for Nuxt.js", 5 | "repository": "", 6 | "license": "MIT", 7 | "contributors": [ 8 | { 9 | "name": "codebender828 " 10 | } 11 | ], 12 | "files": [ 13 | "lib" 14 | ], 15 | "main": "lib/module.js", 16 | "scripts": { 17 | "postinstall": "yarn --cwd docs", 18 | "dev": "nuxt example", 19 | "lint": "eslint --ext .js,.vue .", 20 | "release": "yarn test && standard-version && git push --follow-tags && npm publish", 21 | "test": "yarn lint && jest", 22 | "docs:dev": "yarn --cwd docs dev" 23 | }, 24 | "dependencies": { 25 | "@mdx-js/vue-loader": "latest", 26 | "babel-loader": "^8.2.2" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "latest", 30 | "@babel/preset-env": "latest", 31 | "@changesets/cli": "^2.12.0", 32 | "@commitlint/cli": "latest", 33 | "@commitlint/config-conventional": "latest", 34 | "@nuxtjs/eslint-config": "latest", 35 | "@nuxtjs/module-test-utils": "latest", 36 | "@vue/babel-preset-jsx": "^1.2.4", 37 | "babel-eslint": "latest", 38 | "babel-jest": "latest", 39 | "eslint": "latest", 40 | "husky": "latest", 41 | "jest": "latest", 42 | "nuxt": "latest", 43 | "standard-version": "latest" 44 | }, 45 | "publishConfig": { 46 | "access": "public" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /test/module.test.js: -------------------------------------------------------------------------------- 1 | const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils') 2 | 3 | describe('module', () => { 4 | let nuxt 5 | 6 | beforeAll(async () => { 7 | ({ nuxt } = (await setup(loadConfig(__dirname, '../../example')))) 8 | }, 60000) 9 | 10 | afterAll(async () => { 11 | await nuxt.close() 12 | }) 13 | 14 | test('renders vue page', async () => { 15 | const html = await get('/') 16 | expect(html).toContain('Works!') 17 | }) 18 | 19 | test('renders .mdx content', async () => { 20 | const html = await get('/test') 21 | expect(html).toContain('This a Nuxt MDX tomato') 22 | }) 23 | 24 | test('resolves and renders imported .mdx component', async () => { 25 | const html = await get('/import') 26 | expect(html).toContain('

MDX component

') 27 | }) 28 | }) 29 | --------------------------------------------------------------------------------