Markdownit for Nuxt 2

Using markdownit-loader and markdown-it

Setup

• Add @nuxtjs/markdownit dependency using yarn or npm to your project
• Add @nuxtjs/markdownit to modules section of nuxt.config.js

{
  modules: [
    '@nuxtjs/markdownit'
  ],

  // [optional] markdownit options
  // See https://github.com/markdown-it/markdown-it
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    use: [
      'markdown-it-div',
      'markdown-it-attrs'
    ]
  }
}

Usage

Using .vue files

TIP You can also write Vue logic inside <template lang="md">!

hello.vue:

<template lang="md">
  # Hello World!

  Current route is: {{ $route.path }}
</template>

Using .md files

hello.md

# Hello World!!

hello.vue

<template>
  <div v-html="hello"></div>
</template>

<script>
  import hello from '../hello.md'

  export default {
    computed: {
      hello() {
        return hello
      }
    }
  }
</script>

Using $md to render markdown

nuxt.config.js:

{
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    runtime: true // Support `$md()`
  }
}

hello.vue:

<template>
  <div v-html="$md.render(model)"></div>
</template>

<script>
export default {
  data() {
    return {
      model: '# Hello World!'
    }
  }
}
</script>