You can configure Nuxt Content with the content property in your nuxt.config.js|ts file.
export default defineNuxtConfig({ content: { // My custom configuration }})
base
String
'/_content'
Base route that will be used for content api.
export default defineNuxtConfig({ content: { base: '/_content' }})
watch
Object | false
{ 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 } } }})
ws
optionsOption | Default | Description |
---|---|---|
port | 4000 | Select the port used for the WebSocket server. |
showUrl | false | Toggle URL display in dev server boot message. |
sources
Array<Object | String>
['content']
Define different sources for contents.
Contents can located in multiple places, in multiple directories or in remote git repositories.
export default defineNuxtConfig({ content: { sources: [ 'content', { name: 'fa-ir', 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
string[] | object[]
['\\.', '-']
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
Boolean
true
Whether MDC syntax should be supported or not.
toc
Object
{ depth: 2, searchDepth: 2}
Control behavior of Table of Contents generation.
depth
: Maximum heading depth to includes in the table of contents.searchDepth
: Maximum depth of nested tags to search for heading.tags
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' } } }})
highlight
false | Object
Nuxt Content uses Shiki to provide syntax highlighting for ProseCode
and ProseCodeInline
.
highlight
optionsOption | Type | Description |
---|---|---|
theme | ShikiTheme or Record<string, ShikiTheme> | The color theme to use. |
preload | ShikiLang[] | The preloaded languages available for highlighting. |
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' } } }})
yaml
false | Object
{}
Options for yaml parser.
navigation
false or Object
true
Configure the navigation feature.
Can be set to false
to disable the feature completely.
navigation
optionsOption | Type | Description |
---|---|---|
fields | string[] | A list of fields to inherit from front-matter to navigation nodes. |
locales
Array<String>
[]
List of locale codes. This codes will be used to detect contents locale.
defaultLocale
String
undefined
Default locale for top level contents. Module will use first locale code from locales
array if this option is not defined.
documentDriven
Boolean | Object
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
optionsOption | Type | Description |
---|---|---|
page | Boolean | Enables the page binding, making it globally accessible. |
navigation | Boolean | Enables the navigation binding, making it globally accessible. |
surround | Boolean | Enables the surround binding, making it globally accessible. |
globals | Object | Boolean | A list of globals to be made available globally. |
layoutFallbacks | string[] | A list of globals key to use to find a layout fallback. |
injectPage | boolean | Inject [...slug].vue pre-configured page |