Getting Started

Installation

Install using your package manager:

npm

npm install vuemarkik

yarn

yarn add vuemarkik

pnpm

pnpm add vuemarkik

bun

bun add vuemarkik

deno

deno add npm:vuemarkik

Simple Rendering

To render a markdown string, import the Markdown component and pass the string to the text prop:

<template>
  <Markdown :text="poetry" />
</template>

<script setup>
  import { Markdown } from 'vuemarkik';

  const poetry = `\
### Poetry Corner

> "You are old, Father William," the young man said,  
> "And your hair has become very white;  
> And yet you incessantly stand on your head -  
> Do you think, at your age, it is right?"

*Excerpt from __You Are Old, Father William__ by Lewis Carroll*
`;
</script>

This renders the following:

Poetry Corner

"You are old, Father William," the young man said,
"And your hair has become very white;
And yet you incessantly stand on your head -
Do you think, at your age, it is right?"

Excerpt from You Are Old, Father William by Lewis Carroll

What's Next?

Learn how to customize and extend VueMarkik:

• Custom Vue Components - Use your own components or slots for rendering
• Remark & Rehype Plugins - Extend markdown syntax and rendering

Or explore specific examples:

• GitHub Flavored Markdown - Tables, task lists, strikethrough, and more
• Syntax Highlighting - Code highlighting with Shiki
• Mermaid Diagrams - Render diagrams and flowcharts
• Math with KaTeX - Display mathematical equations