Nuxt.js Add Markdown Pages

March 12, 2020

Install

npm i @nuxtjs/markdownit

Edit nuxt.config.js

export default {
  modules: [
    '@nuxtjs/markdownit'
  ],
  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](https://analytics.google.com/analytics/web/) to collect basic analytics.
</template>

<script>
export default {
  head: {
    title: 'Privacy'
  },
  data() {
    return {
      APP_NAME: 'Journey Privacy Policy'
    }
  }
}
</script>

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

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.