API Reference

Complete reference for vuemarkik components, props, and slots.

Components

Markdown

Synchronous markdown renderer. Processes markdown immediately during component setup.

Props:

Prop	Type	Required	Default	Description
text	string	Yes	-	Markdown content to render
components	object	No	{}	Custom Vue components for HTML elements
remarkPlugins	RemarkPlugins	No	[]	Remark plugins to process markdown
rehypePlugins	RehypePlugins	No	[]	Rehype plugins to transform HTML

Slots:

All HTML element names (e.g., h1, p, code, a) can be used as slots. Each slot receives a node object containing childMarkdown.

Usage:

<script setup lang="ts">
import {  } from 'vuemarkik';

const  = '# Hello World\n\nThis is **bold** text.';
</script>

<template>
  < ="" />
</template>

With Custom Components:

<script setup lang="ts">
import {  } from 'vuemarkik';
import {  } from 'vue';

const  = ({
  : '<h1 class="custom"><slot /></h1>',
});

const  = '# Custom Heading';
</script>

<template>
  < ="" ="{ :  }" />
</template>

---

MarkdownAsync

Asynchronous markdown renderer. Uses async setup for processing markdown. Requires wrapping in <Suspense>. Use this when using rehype or remark plugins that need to run asynchronously.

Props:

Prop	Type	Required	Default	Description
text	string	Yes	-	Markdown content to render
components	object	No	{}	Custom Vue components for HTML elements
remarkPlugins	RemarkPlugins	No	[]	Remark plugins to process markdown
rehypePlugins	RehypePlugins	No	[]	Rehype plugins to transform HTML

Slots:

All HTML element names can be used as slots. Each slot receives a node object containing childMarkdown.

Usage:

<script setup lang="ts">
import {  } from 'vuemarkik';

const  = '# Async Processing\n\nContent loaded asynchronously.';
</script>

<template>
  <>
    < ="" />
  </Suspense>
</template>

Note: MarkdownAsync is ideal when using plugins with async operations or when you need non-blocking rendering.

---

MarkdownHooks

Reactive markdown renderer using Vue composables. Provides reactive updates and emits events. Use this when using rehype or remark plugins that run asynchronously.

Props:

Prop	Type	Required	Default	Description
text	string	Yes	-	Markdown content to render
components	object	No	{}	Custom Vue components for HTML elements
remarkPlugins	RemarkPlugins	No	[]	Remark plugins to process markdown
rehypePlugins	RehypePlugins	No	[]	Rehype plugins to transform HTML

Events:

Event	Payload	Description
content-loaded	None	Emitted when markdown processing completes

Slots:

All HTML element names can be used as slots. Each slot receives a node object containing childMarkdown.

Usage:

<script setup lang="ts">
import { MarkdownHooks } from 'vuemarkik';
import { ref } from 'vue';

const markdown = ref('# Initial Content');

function onContentLoaded() {
  console.log('Markdown rendered!');
}
</script>

<template>
  <MarkdownHooks :text="markdown" @content-loaded="onContentLoaded" />
</template>

Note: MarkdownHooks uses VueUse's computedAsync for reactive markdown processing.

---

MarkdownChildNodes

Utility component for rendering child nodes within custom slots.

Props:

Prop	Type	Required	Default	Description
node	object	No	-	Node object containing childMarkdown VNode

Usage:

<script setup lang="ts">
import { ,  } from 'vuemarkik';

const  = '# Custom Styled Heading\n\nWith custom `code` too.';
</script>

<template>
  < ="">
    <template #h1="">
      < ="custom-heading">
        < ="" />
      </>
    </template>
    <template #code="">
      < ="custom-code">
        < ="" />
      </>
    </template>
  </Markdown>
</template>

<style scoped>
.custom-heading {
  color: #42b883;
  border-bottom: 2px solid currentColor;
}
.custom-code {
  background: #f5f5f5;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}
</style>

---

Props Reference

Common Props

All markdown rendering components (Markdown, MarkdownAsync, MarkdownHooks) share the same props:

text

• Type: string
• Required: Yes
• Description: The markdown content to render

const : string = '# Hello\n\nThis is markdown.';

components

• Type: Partial<Components>
• Required: No
• Default: {}
• Description: Object mapping HTML element names to custom Vue components

const  = ({
  : '<a class="custom-link"><slot /></a>',
});

const  = {
  : ,
  : ({ : '<code class="code"><slot /></code>' }),
};

remarkPlugins

• Type: RemarkPlugins
• Required: No
• Default: []
• Description: Array of remark plugins to process markdown AST

const :  = [, ];

rehypePlugins

• Type: RehypePlugins
• Required: No
• Default: []
• Description: Array of rehype plugins to transform HTML AST

const :  = [, ];

Slots Reference

Dynamic Slots

VueMarkik components support dynamic slots for any HTML element. The slot name corresponds to the HTML tag name.

Available Slot Names:

Any valid HTML element name can be used as a slot:

• Headings: h1, h2, h3, h4, h5, h6
• Text: p, span, strong, em, code
• Lists: ul, ol, li
• Links: a
• Structure: div, section, article
• And many more...

Slot Props:

Each slot receives a single prop node:

type  = {
  : {
    : ;
  };
};

Example:

<script setup lang="ts">
import { ,  } from 'vuemarkik';

const  = '# Title\n\nA [link](https://example.com) here.';
</script>

<template>
  < ="">
    <!-- Custom heading -->
    <template #h1="">
      < ="title">
        < ="" />
      </>
    </template>

    <!-- Custom link -->
    <template #a="">
      < ="link" ="_blank">
        < ="" />
      </>
    </template>
  </Markdown>
</template>

---

Component Selection Guide

Choose the right component for your use case:

Component	Use When
Markdown	Default choice for most cases. Fast, synchronous rendering.
MarkdownAsync	Using plugins with async operations. Requires <Suspense>.
MarkdownHooks	Using plugins with async operations without depending on <Suspense>.
MarkdownChildNodes	Rendering children in custom slots. Not used standalone.

Recommendation

If you are not using asynchronous plugins use with Markdown. If you need async support MarkdownHooks is recommended unless you are already using Suspense in your applications.