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.