Install

• Nuxt Js Markdown Extension
• Nuxt Blog
• Nuxt Assets

We are one step closer to having a statically generated blog powered by markdown but, before deploying, we have to make one extra step. Nuxt, by default, generates only the routes found in the pages/ directory, but it doesn’t generate every dynamic page, only the index. So we have to find a way to make it generate also the routes like.

1. All we need to do is to tell webpack to use frontmatter-markdown-loader whenever it sees a Markdown file, which we can do in nuxt.config.js. Import FMMode from 'frontmatter-markdown.
2. Integrate Markdown to manage form. Because implementing SSR on your own can be really tedious, Nuxt.js gives you full support out of the box and will.
3. Empower your Nuxt.js application with @nuxtjs/content module where you can write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.

Edit nuxt.config.js

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

Edit pages/*.

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

• Using .md files
• Using $md to render markdown

Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML, XML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.

Features

Enjoy light and dark mode:

Videos

Demonstration of using $content and <nuxt-content> to display Markdown pages:

Using $content() on a directory to list, filter and search content:

Tutorial

Testimonials

Really enjoy working with the @nuxt_js content module more and more. Especially from a developer perspective. The api is easy to learn and really powerful. Give it a try if you haven't already.

— Rasmus Langvad (@rlangvad) January 23, 2021

Adding an FAQ to @TurnAudio using @nuxt_js nuxt/content. Really great module for organizing a little bit of content within your static website https://t.co/o2uA9Lvmuu

— Lee Martin (@leemartin) August 3, 2020

Wanted to try out @nuxt_js new content theme doc, was a blast!
Managed to hack its interals to extend its Tailwind config with mine hihihi... pic.twitter.com/fuXXOBKXYE

— lihbr (@li_hbr) August 1, 2020

On an upper @nuxt_js is the most exciting thing in web for me right now, everything they put out is golden. The content module is phenomenal.

— Liam Hall - Three Bears (@wearethreebears) July 31, 2020

I've been working on a new portfolio/blog today with @tailwindcss and @nuxt_js. I'm blown away by Nuxt Content.

— Cameron Baney (@cameronbaney) August 1, 2020

Docs powered by the new @nuxt_js content plugin and stored in @Netlify what a time to be a developer

Nuxt Js Markdown Extension

— Alfonso Bribiesca (@alfonsobries) July 30, 2020

The new vee-validate v4 documentation is using @nuxt_js content module and so far it is too damn good 🔥
I like being able to create my own layouts and 'on this page' and 'menu' components, in other words, to be in full control 🎮

— Abdelrahman Awad (@logaretm) July 26, 2020

Nuxt Blog

Decided to build a blog with @nuxt_js content module. I mean, it's rapid and lightning quick to setup. Super nice experience thus far 👌

Nuxt Assets

— 𝖊𝖗𝖉 (@erd_xyz) July 23, 2020