# @mdit-vue/plugin-component

> A markdown-it plugin to allow vue components in markdown

Latest version **3.0.2** (published 2025-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mdit-vue/plugin-component
pnpm add @mdit-vue/plugin-component
yarn add @mdit-vue/plugin-component
bun add @mdit-vue/plugin-component
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2025-08-11 |
| First published | 2022-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.0.0 |
| Dependencies | 2 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 220 |
| Author | meteorlxy |
| Maintainers | meteorlxy |
| Keywords | markdown-it, markdown-it-plugin, vue, component |

## Links

- npm: https://www.npmjs.com/package/@mdit-vue/plugin-component
- Repository: https://github.com/mdit-vue/mdit-vue
- Homepage: https://github.com/mdit-vue
- Issues: https://github.com/mdit-vue/mdit-vue/issues
- npm.io page: https://npm.io/package/@mdit-vue/plugin-component

## Dependencies (2)

- [markdown-it](https://npm.io/package/markdown-it.md) ^14.1.0
- [@types/markdown-it](https://npm.io/package/@types/markdown-it.md) ^14.1.2

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 3.0.2 (latest) — 2025-08-11
- 3.0.1 — 2025-08-11
- 3.0.0 — 2025-08-11
- 2.1.4 — 2025-04-10
- 2.1.3 — 2024-05-13
- 2.1.2 — 2024-04-15
- 2.1.1 — 2024-04-13
- 2.1.0 — 2024-04-08
- 2.0.0 — 2023-12-08
- 1.0.0 — 2023-09-26
- 0.12.1 — 2023-08-24
- 0.12.0 — 2023-02-10
- 0.11.2 — 2022-12-23
- 0.11.1 — 2022-08-30
- 0.11.0 — 2022-08-25
- … 15 more at https://npm.io/package/@mdit-vue/plugin-component/versions

## README

# @mdit-vue/plugin-component

[![npm](https://badgen.net/npm/v/@mdit-vue/plugin-component)](https://www.npmjs.com/package/@mdit-vue/plugin-component)
[![license](https://badgen.net/github/license/mdit-vue/mdit-vue)](https://github.com/mdit-vue/mdit-vue/blob/main/LICENSE)

A [markdown-it](https://github.com/markdown-it/markdown-it) plugin to allow Vue components in markdown.

- Treats [vue built-in components](https://vuejs.org/api/built-in-components.html) and unknown HTML tags as vue components (markdown-it would treat them as inline tags by default).
- Allows vue [`@` directive](https://vuejs.org/api/built-in-directives.html#v-on) on native HTML tags.

## Install

```sh
npm i @mdit-vue/plugin-component
```

## Usage

This plugin will only take effects when the `html` option of markdown-it is enabled:

```ts
import { componentPlugin } from '@mdit-vue/plugin-component';
import MarkdownIt from 'markdown-it';

const md = MarkdownIt({ html: true }).use(componentPlugin, {
  // options
});

const rendered = md.render(
  `\
<!-- @ shorthand is supported -->
<Foo @click="onClick" />

<!-- multi-line syntax won't be wrapped with <p> -->
<Foo
  class="foo"
  :bar="bar"
/>
`,
);
```

## Options

### blockTags

- Type: `string[]`

- Default: `[]`

- Details:

  Extra tags to be treated as block tags.

  By default, all standard [HTML inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) will be treated as inline tags (excluding [Vue built-in special elements](https://vuejs.org/api/built-in-special-elements.html)). All unknown elements will be assumed as Vue components, and will be treated as block tags (with slight differences).

  In some cases (should be rare though) you might want to force some tags to behave like block tags, then you can use this option to specify the tag names.

  Notice that this option is case-sensitive, and has higher priority than the [inlineTags](#inlinetags) option.

### inlineTags

- Type: `string[]`

- Default: `[]`

- Details:

  Extra tags to be treated as inline tags.

  By default, only standard [HTML inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) will be treated as inline tags (excluding [Vue built-in special elements](https://vuejs.org/api/built-in-special-elements.html)). All unknown elements will be assumed as Vue components, and will be treated as block tags (with slight differences).

  Treating Vue components like block tags would work as expected in most cases. However, in some cases you might want to force some tags to behave like inline tags, then you can use this option to specify the tag names.

  Notice that this option is case-sensitive, and has lower priority than the [blockTags](#blocktags) option.

---
_Source: https://npm.io/package/@mdit-vue/plugin-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._