@digibytes/markdownit

[![npm](https://img.shields.io/npm/dt/@nuxtjs/markdownit.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/markdownit) [![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/markdownit/latest.svg?style=flat-square)](https://npmjs.com/packa

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@digibytes/markdownit
1.2.24 years ago4 years agoMinified + gzip package size for @digibytes/markdownit in KB

Readme

Markdownit
npm npm (scoped with tag)
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-container', containerName],
      '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: {
    injected: true
  }
}

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

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