What is VueMarkik?

VueMarkik (pronounced view-mark-eek, IPA /vjuː mɑːrk ik/) is a mini component library for Vue.js with components that take a markdown string and safely render it to Vue elements. It is built on top of unified, using remark to parse markdown, and rehype to render it to Vue components.

Just want to use it? Skip to Getting Started.

The name VueMarkik comprises the words Vue Markdown with the Armenian diminutive -ik (-իկ), which turns nouns into smaller, cuter, or familiar versions of themselves. Thus VueMarkik is a small friendly plugin for rendering markdown in Vue.js.

Features

• Markdown Extensions

  VueMarkik can be configured with remark plugins to change how markdown is transformed, enabling support for markdown syntax extensions such as GFM and MDX.

• Custom Rendering

  VueMarkik can be configured with rehype plugins to change how markdown is rendered, for example syntax highlighting with Shiki, diagrams with mermaid, and math rendering with KaTeX.

• Custom Vue Components

  To further customize the rendered markdown, you can provide custom Vue components that will be used instead of standard HTML elements, or use template slots for dynamic customization. For example, a custom component or slot for <h1> can customise the rendering of # hola.