README
Markdownit
Using markdownit-loader and markdown-it
Setup
- Add
@nuxtjs/markdownit
dependency using yarn or npm to your project - Add
@nuxtjs/markdownit
tomodules
section ofnuxt.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
.vue
files
Using TIP You can also write Vue logic inside <template lang="md">
!
hello.vue
:
<template lang="md">
# Hello World!
Current route is: {{ $route.path }}
</template>
.md
files
Using 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>
$md
to render markdown
Using 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>