Hooks - Nuxt Content

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
      })
    }
  })
})

useContent()

The useContent() composable gives access to the current page, surrounding pages and global data.

Transformers

Transformers are responsible for parsing and manipulating contents in Nuxt Content.