DEV Community

Cover image for Nuxt Content custom markdown block
Kyle Welsby
Kyle Welsby

Posted on

Nuxt Content custom markdown block

During a live-stream on 25th November 2020 I was tackling a feature on my project where I have Markdown within front-matter data I would like to render to the page correctly.

Here I'm quickly sharing some findings after sleeping on the problem and finding an elegant solution to the problem.


Utilise the content:file:beforeInsert hook in nuxt.config.js.


Assuming you've got a nuxt.js project with @nuxt/content module installed

It is expected you'll have a content file like the following, containing Markdown within a property.

# content/
title: Hello World
specialNotice: |
  This is **Special Notice** to 
  everyone using 
Enter fullscreen mode Exit fullscreen mode


With the above content, we can see the specialNotice which is formatted using Markdown. So we're going to pre-parse this field and make it accessible for the <nuxt-content /> helper to render the HTML output.

Within nuxt.config.js we're going to add into the hook section a content:file:beforeInsert to convert the Markdown content to JSON ATS which is like a node tree that can be rendered to the page.

// nuxt.config.js
export default {
  // ...
  hooks: {
    // Doc:
    'content:file:beforeInsert': async (document, database) => {
      // search for markdown containing 
      // only `specialNotice` property.
      if (document.extension === '.md' && 
          document.specialNotice) { 
        // Replace Markdown string in database 
        // with the JSON ATS version
        document.specialNotice = await database 
  // ...
Enter fullscreen mode Exit fullscreen mode


<!-- pages/index.vue -->
    <h1>{{ document.title }}</h1>
    <nuxt-content :document="document.specialNotice" />
export default {
  async asyncData ({ $content }) {
    const document = await $content('home').fetch()
    return {
Enter fullscreen mode Exit fullscreen mode

There we have it; Your page should contain the special notice rendered in HTML.

Follow me on Twitch, YouTube and Twitter for regular live-streams and chat.

Top comments (0)