nuxt-content-body-html

nuxt-content-body-html

Adds a property to each @nuxt/content document containing the raw HTML body, rendered from markdown.

Sometimes you need the raw HTML code of @nuxt/content documents for processing. A frequent use case is to generate an RSS feed and to add the HTML as content:encoded. The module will use the default remark and rehype plugins. You can also add additional plugins.

Install

# npm
$ npx nuxi module add nuxt-content-body-html

# Yarn
$ yarn nuxi module add nuxt-content-body-html

Usage

Add the module to your nuxt.config.js file:

export default {
  modules: [
    '@nuxt/content',
    'nuxt-content-body-html',
  },
}

To generate the HTML, you have two options:

1. Add fields to the module config.
2. Use the useNuxtContentBodyHtml composable.

If you just need a simple HTML version of your markdown content, the module config is fine. If you want to generate the HTML somewhere else, you can use the composable.

Module config

export default {
  modules: [
    '@nuxt/content',
    ['nuxt-content-body-html', {
      fields: {
        bodyHtml: {},
      },
    }],
  },
}

Then add the field to your content config:

// content.config.js

import { defineContentConfig, defineCollection, z } from '@nuxt/content';

export default defineContentConfig({
  collections: {
    content: defineCollection({
      source: '**',
      type: 'page',
      schema: z.object({ bodyHtml: z.string() }),
    }),
  },
});

This is the simplest way of generating the bodyHtml field into the file objects.

Adding Remark and Rehype plugins

In some cases you will want to add additional plugins to customize the HTML. E.g. in an RSS feed you want to have absolute URLs. You can add plugins to the field configs and the composable like so:

export default {
  modules: [
    '@nuxt/content',
    ['nuxt-content-body-html', {
      fields: {
        bodyHtml: {
          remarkPlugins: {
            'remark-foo': {},
          },
          rehypePlugins: {
            'rehype-foo: {},
          },
        },
      },
    }],
  },
}

Disabling the highlighter

You can disable syntax highlighting like so:

export default {
  modules: [
    '@nuxt/content',
    ['nuxt-content-body-html', {
      fields: {
        bodyHtml: { highlight: false },
      },
    }],
  },
}

Composable

// server/api/stuff.get.js

const nuxtContentBodyHtml = useNuxtContentBodyHtml();

export default defineEventHandler(event => {
  const file = await queryCollection(event, 'content').first();
  return nuxtContentBodyHtml.generate(file, { /* Same options as field config */ });
});

Usage for RSS feeds

You can customize the module so that you can use the resulting HTML code for RSS feeds.

RSS feeds require URLs to be absolute. You can use rehype-urls to make relative URLs absolute.

// nuxt.config.js

// Set process.env.BASE_URL to the domain to prepend

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    ['nuxt-content-body-html', {
      fields: {
        bodyHtml: {
          rehypePlugins: {
            'rehype-urls': { options: url => (url.host ? url : new URL(url.href, process.env.BASE_URL)) },
          },
        },
      },
    }]
  ]
});

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

 If you want to send me a one time donation. The coffee is pretty good 😊.
 Also for one time donations if you like PayPal.
 Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

See also

• nuxt-content-git: Adds a property to each @nuxt/content document containing the raw HTML body, rendered from markdown.
• nuxt-mail: Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
• nuxt-route-meta: Adds Nuxt page data to route meta at build time.
• nuxt-modernizr: Adds a Modernizr build to your Nuxt.js app.
• nuxt-mermaid-string: Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.

License

MIT License © Sebastian Landwehr