Markdown-it not working with Nuxt & contentful, throwing errors

Question

I am Building a site using Contentful and have followed different guides and configurations. No matter what I do I can't seem to get a basic example of markdownit working. I keep getting an error:

Property or method "$md" is not defined on the instance but referenced during render.

can't get any examples in the docs working: https://openbase.com/js/@nuxtjs/markdownit

I have even deleted the whole template and tried simple versions. I have also tried different set ups in the config file below.

I have run 'yarn build', 'yarn add markdown-it'

and neither seem to have helped

here is what I am trying to get to work eventually:

<article v-html="$md.render(post.fields.body)"></article>

This is one example I am following and it seems to be working here on the live demo: https://github.com/sdras/contentful-nuxt-netlify/blob/e80e6552eef812320a7bd2dd66ad3fa8ebf5f840/pages/_slug.vue

In context - pages/_id/index.vue

<template>
  <div class="post-component">
    <a @click="$router.go(-1)">Go back to overview</a>
    <hr />
    <h1>{{post.fields.title}}</h1>
    <p></p>

    <p>
      {{post.fields.body}}
    </p>

    <article v-html="$md.render(post.fields.body)"></article>
    
  </div>
</template>

<script>
  import {createClient} from '../../plugins/contentful';
  const contentfulClient = createClient();

  export default {
    name: 'index',
    asyncData ({ env, params }) {
      return contentfulClient.getEntries({
        'content_type': env.CTF_BLOG_POST_TYPE_ID,
        'fields.slug': params.id
      }).then(post => {
        return {
          post: post.items[0]
        }
      }).catch(console.error)
    }
  }
</script>

nuxt.config.js

const config = require('./.contentful.json')


module.exports = {
  // ...
  env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
    CTF_PERSON_ID: config.CTF_PERSON_ID,
    CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
  }
  // ...
}

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'thomasulman',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [

  'nuxt-buefy', 

  "@nuxtjs/markdownit"],

  markdownit: {
    runtime: true, // Support `$md()`
    injected: true,
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

package.json

{
  "name": "******",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/markdownit": "^1.2.10",
    "contentful": "^8.4.2",
    "core-js": "^3.15.1",
    "markdown-it": "^12.1.0",
    "nuxt": "^2.15.7",
    "nuxt-buefy": "^0.4.8"
  },
  "devDependencies": {}
}

just in case it helps: index.vue

<template>
  <div>
    <!-- <Navigation /> -->
    <!-- render data of the person -->
    <h1>{{ person.fields.name }}</h1>
    <!-- render blog posts -->
    <ul>
      <li v-for="post in posts">
        {{ post.fields.title }}
        <nuxt-link :to="post.fields.slug" class="more">Read more ⟶</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { createClient } from '~/plugins/contentful.js'
const client = createClient()
export default {
  // `env` is available in the context object
  asyncData({ env }) {
    return Promise.all([
      // fetch the owner of the blog
      client.getEntries({
        'sys.id': env.CTF_PERSON_ID
      }),
      // fetch all blog posts sorted by creation date
      client.getEntries({
        'content_type': env.CTF_BLOG_POST_TYPE_ID,
        order: '-sys.createdAt'
      })
    ]).then(([entries, posts]) => {
      // return data that should be available
      // in the template
      return {
        person: entries.items[0],
        posts: posts.items
      }
    }).catch(console.error)
  }
}
</script>

Answer 1

The issue with the whole thing was that // module.exports {} was overwriting the export default {} in the config file.

Answer 2

I've achieved to make it work properly as shown here: https://github.com/nuxt-community/markdownit-module#usage

I've added a proper HTML sanitizer too, check the plugins directory.

You can find the working Github repo here: https://github.com/kissu/so-nuxt-markdownit

This configuration was enough so far for me
nuxt.config.js

plugins: [
  '~/plugins/vue-dompurify'
],
modules: [
  '@nuxtjs/markdownit'
],
markdownit: {
  runtime: true, // Support `$md()`
  // preset: 'default',
  // linkify: true,
  // breaks: true,
  // use: [
  //   'markdown-it-div',
  //   'markdown-it-attrs'
  // ]
}

And those 2 files are working properly
index.vue

<template>
  <div>
    <div v-dompurify-html="$md.render(model)"></div>

    <br/>
    <br/>

    <div v-dompurify-html="testMarkdownContent"></div>

    <nuxt-link to="/inline">Inline markdown working too!</nuxt-link>
  </div>
</template>

<script>
import testMarkdown from '../blog/test.md'

export default {
  data() {
    return {
      model: '# Hello World!'
    }
  },
  computed: {
    testMarkdownContent() {
      return testMarkdown
    }
  }
}
</script>

inline.vue

<template lang="md">
  # Hello World!

  Current route is: {{ $route.path }}

  <nuxt-link to="/">Back to index</nuxt-link>
</template>