4.advanced.md

title	description	icon
Advanced	Nuxt Content is highly customizable, giving you freedom and control over how the data is transformed.	heroicons-outline:lightning-bolt

Hooks

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 custom nitro plugin.

• Create a plugin in the server/plugins/ directory

  export default defineNitroPlugin((nitroApp) => {
    // ...
  })

• Register the plugin in nuxt.config.ts

  export default defineNuxtConfig({
    // ...
    nitro: {
      plugins: ['~/server/plugins/content.ts']
    }
  })

content:file:beforeParse

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

Arguments:

• file
  • Type: Object
  • Properties:
    • _id: String
    • body: String

Example

Changing all occurrences of react to vue in all Markdown files:

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.

Example

Using content's first picture as cover image.

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