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': {
            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.

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',
      binding: '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 binding field.

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

Postgres

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

First, make sure to install the pg package:

npx npm i pg

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

export default defineNuxtConfig({
  content: {
    database: {
      type: 'postgres',
      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:

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

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,
  ws: { 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.

export default defineNuxtConfig({
  content: {
    watch: {
      ws: {
        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',
}