RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/f3ve/vue-markdown-it below:

f3ve/vue-markdown-it: Vue 3 plugin and component for markdown-it

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.

(back to top)

Vue 3

npm i @f3ve/vue-markdown-it

(back to top)

You can directly import the component in your SFC file.

<!-- 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>
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');

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

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>

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>

(back to top)

See the open issues for a full list of proposed features (and known issues).

(back to top)

See contributing guide

(back to top)

Distributed under the MIT License.

(back to top)

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4