@nuxtjs/markdownit
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @nuxtjs/markdownit

Weekly Downloads

9,367

Version

2.0.0

License

MIT

Unpacked Size

12.5 kB

Total Files

7

Last publish

Collaborators

  • antfu
  • danielroe
  • clarkdo
  • pi0
  • atinux
  • alexchopin