Advanced

Nuxt Content is highly customizable, giving you freedom and control over how the data is transformed.


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
    server/plugins/content.ts
    export default defineNitroPlugin((nitroApp) => {  // ...})
  • Register the plugin in nuxt.config.ts
    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:

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.

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