Vue 3 markdown-it component
Explore the docs »
Report Bug
·
Request Feature
Table of Contents
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.
- Vue 3
npm i vuenpm i @f3ve/vue-markdown-it
You can directly import the component in your SFC file.
In <script setup> Syntax
<!-- Vue 3 setup script syntax -->
<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><script>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
export default {
components: {
VueMarkdownIt
}
setup() {
const post = ref();
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
}
}
</script>
<template>
<vue-markdown-it :source="post" />
</template>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');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>See Markdown-it docs for more information
Note: I'm using Vue script setup syntax in these examples. If you're not using script setup make sure to register the component before using.
<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><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><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>See the open issues for a full list of proposed features (and known issues).
Distributed under the MIT License.