recipes

Hooks

Nuxt Content exposes hooks to allow you to modify the content before it is parsed and after it is parsed.

The module adds some hooks you can use:

content:file:* hooks are available in nitro runtime, in order to use them you need to create a custom nitro plugin.

Create a plugin in the server/plugins/ directory

server/plugins/content.ts
export default defineNitroPlugin((nitroApp) => {
  // ...
})

content:file:beforeParse

Allows you to modify the contents of a file before it is handled by the parsers.

Arguments:

  • file: { _id: string, body: string }

Example:

Changing all occurrences of React to Vue in all Markdown files:

server/plugins/content.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('content:file:beforeParse', (file) => {
    if (file._id.endsWith('.md')) {
      file.body = file.body.replace(/react/g, 'vue')
    }
  })
})

content:file:afterParse

Allows you to modify a document after being parsed by parsers.

Arguments:

  • file: { _id: string, body: any }

Example:

Using content's first picture as cover image.

server/plugins/content.ts
import { visit } from 'unist-util-visit'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('content:file:afterParse', (file) => {
    if (file._id.endsWith('.md')) {
      visit(file.body, (n: any) => n.tag === 'img', (node) => {
        file.coverImage = node.props.src
      })
    }
  })
})