Can Nuxt Content replace Vue Showdown?

[ddahan]

Vue Showdown is a simple package which allows any markdown to be converted to HTML on the fly.

I keep my markdown-based blog posts in a database, and use it to convert them in HTML with Vue/Nuxt.

But I was curious: is there any chance Nuxt content can be use for this exact same purpose only (without reading markdown from files)? Thanks.

[roma-marshall]

Hello @ddahan and yes, you can use Nuxt Content to achieve the same purpose of converting Markdown to HTML without reading markdown from files.

By leveraging Nuxt Content, you can store your markdown-based blog posts in a database instead of individual files. Nuxt Content supports various data sources, including local Markdown files, remote Markdown files, and even APIs or databases.

1. Install the necessary dependencies:
   npm install @nuxt/content

2. Configure the Nuxt Content module in your Nuxt configuration file (nuxt.config.js):

export default {
  modules: [
    '@nuxt/content',
  ],
  content: {
    // Configure your content options here
  },
}

3. Fetch the content from the database using Nuxt Content's API. You can use Nuxt Content's $content object to access your content and convert it to HTML using Vue Showdown or any other Markdown-to-HTML converter. Here's an example of how you can use Vue Showdown:

<template>
  <div v-html="renderedMarkdown"></div>
</template>

<script>
import VueShowdown from 'vue-showdown';

export default {
  async asyncData() {
    const post = await this.$content('posts').fetch(/* fetch your content from the database */);
    const markdown = post.body; // Assuming the body of the post contains the Markdown content
    const converter = new VueShowdown();
    const html = converter.convert(markdown);

    return {
      renderedMarkdown: html,
    };
  },
}
</script>