@mdx-js/vue
Vue context for MDX.
Contents
What is this?
This package is a context based components provider for combining Vue with MDX.
When should I use this?
This package is not needed for MDX to work with Vue. See ¶ MDX provider in § Using MDX for when and how to use an MDX provider.
Install
This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install @mdx-js/vue
yarn:
yarn add @mdx-js/vue
Use
import {MDXProvider} from '@mdx-js/vue'
import {createApp} from 'vue'
import Post from './post.mdx'
// ^-- Assumes an integration is used to compile MDX to JS, such as
// `@mdx-js/esbuild`, `@mdx-js/loader`, `@mdx-js/node-loader`, or
// `@mdx-js/rollup`, and that it is configured with
// `options.providerImportSource: '@mdx-js/vue'`.
createApp({
data() {
return {components: {h1: 'h2'}}
},
template: '<MDXProvider v-bind:components="components"><Post /></MDXProvider>',
components: {MDXProvider, Post}
})
Note that you don’t have to use MDXProvider and can pass components directly:
-createApp({
- data() {
- return {components: {h1: 'h2'}}
- },
- template: '<MDXProvider v-bind:components="components"><Post /></MDXProvider>',
- components: {MDXProvider, Post}
-})
+createApp(Post, {components})
See ¶ Vue in § Getting started for how to get started with MDX and Vue. See ¶ MDX provider in § Using MDX for how to use an MDX provider.
API
This package exports the following identifiers: MDXProvider and useMDXComponents. There is no default export.
MDXProvider(props?)
Provider for MDX context.
props
Configuration (Object, optional).
props.components
Mapping of names for JSX components to Vue components (Record<string, string|Component|Components>, optional).
Returns
Fragment (with the default slot if given).
useMDXComponents()
Get current components from the MDX Context.
Returns
Components.
Types
This package is fully typed with TypeScript.
Security
See § Security on our website for information.
Contribute
See § Contribute on our website for ways to get started. See § Support for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.