Nuxt.js Add Markdown Pages

March 12, 2020


npm i @nuxtjs/markdownit

Edit nuxt.config.js

export default {
  modules: [
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    use: [
      // 'markdown-it-div',
      // 'markdown-it-attrs'

NOTE: If you need addtional features like markdown-it-div, you would need to install the package.

Edit pages/*.

<template lang="md">
# {{ APP_NAME }} Privacy Policy

## Privacy

`The App` does collect basic personal information such as name and email.

`The App (Web)` use [Google Analytics]( to collect basic analytics.

export default {
  head: {
    title: 'Privacy'
  data() {
    return {
      APP_NAME: 'Journey Privacy Policy'

<style scoped>
h2 {
  margin-top: 2rem;

There are other ways to create markdown via @nuxtjs/markdownit as well

  • Using .md files
  • Using $md to render markdown
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.