Vue context for MDX.
- What is this?
- When should I use this?
- Install
- Use
- API
- Types
- Compatibility
- Security
- Contribute
- License
This package is a context based components provider for combining Vue with MDX.
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.
This package is ESM only. In Node.js (version 16+), install with npm:
npm install @mdx-js/vue
In Deno with esm.sh
:
import {MDXProvider} from 'https://esm.sh/@mdx-js/vue@3'
In browsers with esm.sh
:
<script type="module">
import {MDXProvider} from 'https://esm.sh/@mdx-js/vue@3?bundle'
</script>
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: 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: {h1: 'h2'}})
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.
This package exports the identifiers MDXProvider
and
useMDXComponents
.
There is no default export.
Provider for MDX context (Component
from vue
).
Get current components from the MDX Context.
There are no parameters.
Current components (MDXComponents
from
mdx/types.js
).
Configuration for MDXProvider
(TypeScript type).
-
components
(MDXComponents
frommdx/types.js
, optional) — additional components to use
This package is fully typed with TypeScript.
It exports the additional type Props
.
For types to work, make sure the TypeScript JSX
namespace is typed.
This is done by installing and using the types of your framework, as in
vue
.
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, @mdx-js/vue@^3
,
compatible with Node.js 16.
See § Security on our website for information.
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.