Search code examples
nuxt.js

Displaying markdown content from a string using nuxtjs content

Suppose, I have a string with markdown contents in it in my database and after fetching that string from the database how can I display it with nuxtjs content module without using md extension? Can anyone show me how to do that?

Solution

  • Given your requirement, you don't have to use nuxt content module just to render some markdown, instead you can use something like @nuxtjs/markdownit

    Once this added to your project you can use $md to render markdown in your document with below config

    nuxt.config.js

    {
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    runtime: true // Support `$md()`
  }
}

    page/component.vue

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

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