Configuration

To configure the content module and customize its behavior, you can use the content property in your nuxt.config:

export default defineNuxtConfig({
  content: {
    // Options
  }
})

build

Nuxt Content read and parse all the available contents at build time. This option gives you control over parsing contents.

markdown

Configure markdown parser.

toc

toc: {
  depth: 2,
  searchDepth: 2
}

type Toc = {
  depth: number
  searchDepth: number
}

Control behavior of Table of Contents generation.

Value:

• depth: Maximum heading depth to include in the table of contents.
• searchDepth: Maximum depth of nested tags to search for heading.

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        toc: {
          depth: 3, // include h3 headings
        }
      }
    }
  }
})

remarkPlugins

remarkPlugins: {}

type RemarkPlugins = Record<string, false | MarkdownPlugin>

A list of remark plugins to use.

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        // Object syntax can be used to override default options
        remarkPlugins: {
          // Override remark-emoji options
          'remark-emoji': {
            options: {
              emoticon: true
            }
          },
          // Disable remark-gfm
          'remark-gfm': false,
          // Add remark-oembed
          'remark-oembed': {
            // Options
          }
        },
      }
    }
  }
})

rehypePlugins

rehypePlugins: {}

type RehypePlugins = object

A list of rehype plugins to use.

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        // Object syntax can be used to override default options
        rehypePlugins: {
          'rehype-figure': {

          }
        },
      }
    }
  }
})

highlight

highlight: false

type Highlight = false | object

Nuxt Content uses Shiki to provide syntax highlighting for ProsePre and ProseCode.

• highlight.theme

Theme can be specified by a single string but also supports an object with multiple themes.

This option is compatible with Color Mode module.

If you are using multiple themes, it's recommended to always have a default theme specified.

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          // Theme used in all color schemes.
          theme: 'github-light',
          // OR
          theme: {
            // Default theme (same as single string)
            default: 'github-light',
            // Theme used if `html.dark`
            dark: 'github-dark',
            // Theme used if `html.sepia`
            sepia: 'monokai'
          }
        }
      }
    }
  }
})

• highlight.langs

By default, the module loads a couple of languages for syntax highlighting:

['json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml']

If you plan to use code samples of other languages, you need to define the language in these options.

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          langs: [
            'c',
            'cpp',
            'java'
          ]
        }
      }
    }
  }
})

If you wish to add highlighting for an unsupported language, you can do so by loading the grammar file for the language.

import { readFileSync } from 'node:fs'

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          langs: [
            // Read more about Shiki languages: https://shiki.style/guide/load-lang
            JSON.parse(
              readFileSync('./shiki/languages/gdscript.tmLanguage.json', 'utf-8'),
            ),
          ]
        }
      }
    }
  }
})

Read more about adding languages in the Shiki documentation.

pathMeta

Content module uses files path to generate the slug, default title and content order, you can customize this behavior with pathMeta option.

pathMeta.forceLeadingSlash

If set to true, the path will be prefixed with a leading slash. Default value is true.

pathMeta.slugifyOptions

Content module uses slugify to generate the slug, you can customize the behavior of slugify with this option.

Checkout slugify options for more information.

transformers

Nuxt Content has specific transformers for each content type to parse the raw content and prepare it for querying and rendering. Using this option you can define custom transformers to support new content types or improve functionalities of supported content types.

export default defineNuxtConfig({
  content: {
    build: {
      transformers: [
        '~/transformers/title-suffix',
      ],
    },
  },
})

import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'title-suffix',
  extensions: ['.md'],
  transform(file) {
    return {
      ...file,
      title: file.title + ' (suffix)',
    }
  },
})

Read more about transformers in the Transformers documentation.

database

By default Nuxt Content uses a local SQLite database to store and query content. If you like to use another database or you plan to deploy on Cloudflare Workers, you can modify this option.

Here is the list of supported database adapters:

SQLite

If you want to change the default database location and move it to elsewhere you can use sqlite adapter to do so. This is the default value to the database option. Depending on your runtime-environment different sqlite adapters will be used (Node: better-sqlite-3, Bun: bun:sqlite).

export default defineNuxtConfig({
  content: {
    database: {
      type: 'sqlite',
      filename: 'SQLITE_DB_LOCATION'
    }
  }
})

D1

If you plan to deploy your application to Cloudflare workers, you need to use the d1 database adapter. Create a d1 binding in the Cloudflare dashboard and fill in the bindingName field.

export default defineNuxtConfig({
  content: {
    database: {
      type: 'd1',
      bindingName: 'CF_BINDING_NAME'
    }
  }
})

Postgres

If you plan to deploy your application using PostgreSQL database you need to use the postgresql database adapter.

First, make sure to install the pg package:

npm i pg

Then, configure the postgresql adapter in your nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    database: {
      type: 'postgresql',
      url: process.env.POSTGRES_URL,
      /* Other options for `pg` */
    }
  }
})

LibSQL

If you plan to deploy your application using a LibSQL database you need to use the libsql database adapter.

First, make sure to install the @libsql/client package:

npm i @libsql/client

Then, configure the libsql adapter in your nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    database: {
      type: 'libsql',
      url: process.env.TURSO_DATABASE_URL,
      authToken: process.env.TURSO_AUTH_TOKEN,
    }
  }
})

PGlite

If you plan to deploy your application using a PGlite database you need to use the pglite database adapter.

First, make sure to install the @electric-sql/pglite package:

npm i @electric-sql/pglite

Then, configure the pglite adapter in your nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    database: {
      type: 'pglite',
      dataDir: '.data/content/pglite'
    }
  }
})

renderer

Configure content renderer.

anchorLinks

{ h2: true, h3: true, h4: true }

type AnchorLinks = boolean | Record<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', boolean>

Control anchor link generation, by default it generates anchor links for h2, h3 and h4 heading

Value:

• false: will disable link generation.
• true: will enable link generation for all headings.

alias

alias: {}

type Alias = Record<string, string>

Aliases will be used to replace markdown components and render custom components instead of default ones.

export default defineNuxtConfig({
  content: {
    renderer: {
      alias: {
        p: 'MyCustomParagraph'
      }
    }
  }
})

watch

watch: {
  enabled: true,
  port: 4000,
  showURL: false
}

Configure content hot reload in development.

Value:

• enabled: Enable/Disable hot reload.
• port: Select the port used for the WebSocket server.
• showURL: Toggle URL display in dev server boot message.

Nuxt Content uses listhen to provide a local development server. Check out the listhen documentation for more information.

export default defineNuxtConfig({
  content: {
    watch: {
      port: 4000,
      showURL: true
    }
  }
})

export default defineNuxtConfig({
  content: {
    watch: {
      enabled: false
    }
  }
})

preview

Enable Preview API

Value:

• dev: Enable in development mode
• api: Activate the preview mode and set the API to be linked with.

preview: {
  api: 'https://api.nuxt.studio',
}

experimental

Experimental features that are not yet stable.

experimental.sqliteConnector

SQLite connectors have limitations in different environments. Some work in serverless environments, while others do not. Nuxt Content supports three different SQLite connectors to cover all environments:

• better-sqlite3: Works in all Node environments, GitHub CI, Vercel CI and production, Cloudflare CI pipelines, etc. (Does not work in WebContainers and StackBlitz)
• sqlite3: Works in Node environments, GitHub CI, and StackBlitz. (Does not work in Vercel or Cloudflare)
• native: As of Node.js v22.5.0, the node:sqlite module is available natively in Node.js. This connector works in all Node environments with Node.js version 22.5.0 or newer.

export default defineNuxtConfig({
  content: {
    experimental: { sqliteConnector: 'native' },
  },
});

experimental.nativeSqlite (deprecated, use sqliteConnector)

As of Node.js v22.5.0, the node:sqlite module is available natively in Node.js. This allows Nuxt Content to use SQLite as a database without the need for an external package.

export default defineNuxtConfig({
  content: {
    experimental: { nativeSqlite: true },
  },
});