Skip to navigation
2-3 minutes read

@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:

Shell
npm install @mdx-js/vue

yarn:

Shell
yarn add @mdx-js/vue

Use

JavaScript
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:

Diff
-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.

License

MIT © Compositor and Vercel