Vue Markdown-it
Vue component for integrating Markdown-it.
Check out the Repo on Github to learn more!
Table of Content
About The Project
This is a component for easily integrating markdown-it in Vue 3. This project was inspired by markdown-it-vue. which hasn’t been updated in a while and only supports Vue 2.
Getting Started
Prerequisites
- Vue 3
npm i vue
Installation
npm i @f3ve/vue-markdown-it
Usage
Importing the Component
You can directly import the component in your SFC file.
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
const post = ref();
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
</script>
<template>
<vue-markdown-it :source="post" />
</template>
Using the Plugin
You can also use the plugin to register the component globally.
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { VueMarkdownItPlugin } from '@f3ve/vue-markdown-it';
const app = createApp(App);
app.use(VueMarkdownItPlugin);
app.mount('#app');
Using markdown-it Plugins
You can add markdown-it plugins using the plugin
prop. plugin
expects an array of markdown-it plugins. If you want to configure the options of a plugin you can nest the plugin and its options in an array.
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
import myPlugin from 'myPlugin';
import myPluginWithOption from 'myPluginWithOptions';
const post = ref();
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
</script>
<template>
<vue-markdown-it
:source="post"
:plugins="[myPlugin, [myPluginWithOptions, { option1: true }]]"
/>
</template>
Using Markdown-it Options & Presets
See Markdown-it docs for more information
Options
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
const post = ref();
const options = {
html: true,
linkify: true,
};
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
</script>
<template>
<vue-markdown-it :source="post" :options="options" />
</template>
Presets
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
const post = ref();
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
</script>
<template>
<vue-markdown-it :source="post" preset="commonmark" />
</template>
Using Presets and Options together
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
const post = ref();
const options = {
html: true,
linkify: true,
};
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
</script>
<template>
<vue-markdown-it :source="post" :options="options" preset="commonmark" />
</template>
Roadmap
See the open issues for a full list of proposed features (and known issues).
Contributing
License
Distributed under the MIT License.