Nuxt.js Add Markdown Pages


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

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.