Find file History
pi0 Publish
 - @nuxtjs/browserconfig@0.0.10
 - @nuxtjs/bulma@1.2.2
 - @nuxtjs/component-cache@1.1.4
 - @nuxtjs/google-tag-manager@2.1.1
 - @nuxtjs/localtunnel@1.1.0
 - @nuxtjs/markdownit@1.2.3
 - @nuxtjs/ngrok@1.2.2
 - @nuxtjs/offline@1.0.7
 - @nuxtjs/plugin-utils@0.2.2
 - @nuxtjs/prepack@0.0.5
 - @nuxtjs/toast@3.0.2
 - @nuxtjs/vuetify@0.5.0
Latest commit 292d3f9 Dec 19, 2018
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
CHANGELOG.md Publish Dec 19, 2018
README.md Change README for markdown-it-container Apr 18, 2018
index.js check if vueLoader.options.loaders exists Jun 11, 2018
package.json Publish Dec 19, 2018
plugin.js feat(markdownit): inject $md to app and vue instance (#174) Nov 27, 2017

README.md

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>