Configuration

You can configure Nuxt Content with the content property in your nuxt.config.js|ts file.

export default defineNuxtConfig({  content: {    // My custom configuration  }})

api

• Type: Record<String, any>
• Default: { baseURL: '/api/_content' }

Change default behaviour of Content APIs.

• baseURL: change the base URL of Content APIs. Default is /api/_content.

export default defineNuxtConfig({  content: {    api: {      baseURL: '/api/_my_content'    }  }})

watch

• Type: Object | false
• Default: { port: 4000, showUrl: true }

Disable content watcher and hot content reload.

The watcher is a development feature and will not be included in production.

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

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

ws options

sources

• Type: Record<String, Object>
• Default: {}

Define different sources for contents.

Contents can be located in multiple places, in multiple directories, or in remote git repositories.

export default defineNuxtConfig({  content: {    sources: {      // overwrite default source AKA `content` directory      content: {        driver: 'fs',        prefix: '/docs', // All contents inside this source will be prefixed with `/docs`        base: resolve(__dirname, 'content')      }      // Additional sources      fa: {        prefix: '/fa', // All contents inside this source will be prefixed with `/fa`        driver: 'fs',        // ...driverOptions        base: resolve(__dirname, 'content-fa') // Path for source directory      }    }  }})

ignores

• Type: string[] | object[]
• Default: ['\\.', '-']

List of ignore pattern that will be used for excluding content from parsing and rendering.

export default defineNuxtConfig({  content: {    ignores: [      'ghost'    ]  }})

markdown

This module uses remark and rehype under the hood to compile markdown files into JSON AST that will be stored into the body variable.

To configure how the module will parse Markdown, you can use markdown.remarkPlugins and markdown.rehypePlugins in your nuxt.config.ts file:

export default defineNuxtConfig({  content: {    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        }      },      // Array syntax can be used to add plugins      rehypePlugins: [        'rehype-figure'      ]    }  }})

Here is a list of plugins @nuxt/content is using by default.

When adding a new plugin, make sure to install it in your dependencies.

mdc

• Type: Boolean
• Default: true

Whether MDC syntax should be supported or not.

toc

• Type: Object
• Default: { depth: 2, searchDepth: 2 }

Control behavior of Table of Contents generation.

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

tags

• Type: Object

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

export default defineNuxtConfig({  content: {    markdown: {      tags: {        p: 'MyCustomParagraph'      }    }  }})

anchorLinks

• Type: Boolean | Object
• Default: {depth: 4, exclude: [1]}

By default, the Content module generates anchor links for h2, h3 and h4 headings. Using this option, you can control link generation.

false will disable link generation.

true will enable link generation for all headings.

options

highlight

• Type: false | Object

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

highlight options

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

By default, module preloads couple of languages for syntax highlighter: ['diff', 'json', 'js', 'ts', 'css', 'shell', 'html', '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: {    highlight: {      preload: [        'c',        'cpp',        'java'      ]    }  }})

yaml

• Type: false | Object
• Default: {}

Options for yaml parser.

navigation

• Type: false or Object
• Default: true

Configure the navigation feature.

Can be set to false to disable the feature completely.

navigation options

locales

• Type: Array<String>
• Default: []

List of locale codes. This codes will be used to detect contents locale.

defaultLocale

• Type: String
• Default: undefined

Default locale for top level contents. Module will use first locale code from locales array if this option is not defined.

documentDriven

• Type: Boolean | Object
• Default: false

Toggles the document-driven mode.

false will disable the feature completely.

true will enable the feature with these defaults:

{  // Will fetch navigation, page and surround.  navigation: true,  page: true,  surround: true,  // Will fetch `content/_theme.yml` and put it in `globals.theme` if present.  globals: {    theme: {      where: {        _id: 'content:_theme.yml'      },      without: ['_']    }  },  // Will use `theme` global to search for a fallback `layout` key.  layoutFallbacks: ['theme'],  // Will inject `[...slug].vue` as the root page.  injectPage: true}

documentDriven options