Getting Started

Configuration

Nuxt Content is configured with sensible defaults.

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

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    // Options
  }
})

build

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

markdown

Configure markdown parser.

mdc

mdc: true

If you wish to disable MDC syntax support in your contents, you can set this option to false.

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        // Disable MDC syntax support
        mdc: false,
      }
    }
  }
})

toc

toc: {
  depth: 2,
  searchDepth: 2
}

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.
nuxt.config.ts
export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        toc: {
          depth: 3, // include h3 headings
        }
      }
    }
  }
})

remarkPlugins

remarkPlugins: {}

A list of remark plugins to use.

nuxt.config.ts
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: {}

A list of rehype plugins to use.

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

          }
        },
      }
    }
  }
})

highlight

highlight: false

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

OptionTypeDescription
themeShikiTheme or Record<string, ShikiTheme>The color theme to use.
langsShikiLang[]The loaded 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.

nuxt.config.ts
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, module loads couple of languages for syntax highlighter:

Default
['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.

nuxt.config.ts
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.

nuxt.config.ts
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.

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 default database location and move it to elsewhere you can use sqlite adapter to do so. This is the default value to database option.

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    database: {
      type: 'sqlite',
      binding: 'SQLITE_DB_LOCATION'
    }
  }
})

D1

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

nuxt.config.ts
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 postgres database adapter.

First, make sure to install the pg package:

Terminal
npx nypm i pg

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

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 LibSQL database you need to use libsql database adapter.

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

Terminal
npx nypm i @libsql/client

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

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    database: {
      type: 'libsql',
      url: process.env.TURSO_DATABASE_URL,
      authToken: process.env.TURSO_AUTH_TOKEN,
    }
  }
})
The most popular LibSQL hosting services is Turso.

renderer

Configure content renderer.

anchorLinks

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

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.
  • object: will customize the link generation.
    • h1: boolean: Whether render anchor link for H1 tags or not.
    • h2: boolean: Whether render anchor link for H2 tags or not.
    • h3: boolean: Whether render anchor link for H3 tags or not.
    • h4: boolean: Whether render anchor link for H4 tags or not.
    • h5: boolean: Whether render anchor link for H5 tags or not.
    • h6: boolean: Whether render anchor link for H6 tags or not.

alias

alias: {}

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

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    renderer: {
      alias: {
        p: 'MyCustomParagraph'
      }
    }
  }
})

watch

Default
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.
The watcher is a development feature and will not be included in production.
export default defineNuxtConfig({
  content: {
    watch: {
      ws: {
        port: 4000,
        showURL: true
      }
    }
  }
})

Installation

Get started with Nuxt Content v3 in your Nuxt application.

Migration

How to migrate from v2 to v3