Markvue

Overview

MarkVue is a package that allows you to mix Vue components or Vue Single File Components (SFC) into Markdown. It is inspired by @vue/sfc-playground and provides a convenient way to incorporate Vue elements into Markdown files.

Features

• Mix Vue components into Markdown: MarkVue allows you to seamlessly integrate Vue components into your Markdown files.
• Support for Vue 3: The package is compatible with Vue 3 and does not support Vue 2.
• Injecting Vue into Vue SFC: MarkVue injects Vue into Vue SFC as context, enabling you to import APIs from Vue directly.
• Binding external packages: You can import and bind external packages to MarkVue by adding them to the context.
• Adding attributes to root elements: MarkVue allows you to add attributes, such as classes, to the root element of Vue SFC or Vue components in Markdown.

Installation

To install MarkVue, follow these steps:

1. Install the package:

npm install markvue

2. Import MarkVue into your project:

import markvue from 'markvue';

3. Start using MarkVue in your pages:

For Vue SFC:

\<vue-sfc>
...
\</vue-sfc>

For Vue components:

\<vue-comp>
...
\</vue-comp>

To add attributes to the root element of Vue SFC or Vue components:

\<vue-sfc class="my-class">
...
\</vue-sfc>

To set custom options for the Marked renderer, add the attribute markedOptions to the MarkVue element:

\<markvue markedOptions="{ /* custom options */ }">
...
\</markvue>

Please note that MarkVue only supports Vue 3 and does not support TypeScript, style preprocessors, or Babel transform of SFC.

Summary

MarkVue is a useful package for incorporating Vue components and SFC into Markdown. It provides a simple installation process and allows for easy integration of Vue elements. The package supports Vue 3 and offers features such as injecting Vue into Vue SFC, binding external packages, and adding attributes to root elements. However, MarkVue does not support Vue 2, TypeScript, style preprocessors, or Babel transform of SFC. The package is licensed under MIT.