@f3ve/vue-markdown-it NPM

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.

Built With

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.

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>

In Regular `<script>` Syntax

<script setup>
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>

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

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>

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>