Configuration

Set package options with the contentMermaid key in nuxt.config.ts:

export default defineNuxtConfig({
  contentMermaid: {
    loader: { lazy: true },
    theme: { light: 'default', dark: 'dark' },
  },
})

General

Option	Type	Default	Purpose
`enabled`	`boolean`	`true`	Enables the module and Markdown transformation at Nuxt startup.
`debug`	`boolean`	`false`	Enables more detailed package diagnostics.

enabled is a build-time module option. Keep it under contentMermaid, not public runtime configuration.

Loading and Mermaid initialization

Option	Type	Default	Purpose
`loader.lazy`	`boolean` or options object	enabled	Waits until a diagram enters the viewport. Set `false` to load immediately.
`loader.lazy.threshold`	`number`	no package value	Sets the `IntersectionObserver` visibility threshold.
`loader.init`	pure-data Mermaid configuration	package defaults	Passes initialization options to Mermaid.

See Writing Diagrams for page and diagram overrides.

Theme

Option	Type	Default	Purpose
`theme.light`	Mermaid theme name	`default`	Theme used in light color mode.
`theme.dark`	Mermaid theme name	`dark`	Theme used in dark color mode.

When @nuxtjs/color-mode is installed, the renderer follows the current color mode. You can also control the active mode with useMermaidTheme().

Custom components

Option	Type	Default	Purpose
`components.renderer`	component name	built-in renderer	Replaces diagram rendering with an application component.
`components.spinner`	component name	none	Supplies a loading component.
`components.error`	component name	none	Supplies a rendering-error component.

Use the registered name of a component from your Nuxt application. If a custom renderer name cannot be resolved, the package falls back to its built-in renderer.

Expand

Set expand: false to disable expanding, expand: true to use all defaults, or provide an options object:

Option	Type	Default	Purpose
`expand.enabled`	`boolean`	`true`	Enables expand interactions.
`expand.margin`	`number`	`0`	Keeps this many pixels around the expanded diagram.
`expand.invokeOpenOn.diagramClick`	`boolean`	`true`	Opens the overlay when the diagram is clicked.
`expand.invokeCloseOn.esc`	`boolean`	`true`	Closes with Escape.
`expand.invokeCloseOn.wheel`	`boolean`	`true`	Closes on a wheel action.
`expand.invokeCloseOn.swipe`	`boolean`	`true`	Closes on a swipe.
`expand.invokeCloseOn.overlayClick`	`boolean`	`true`	Closes when the overlay background is clicked.
`expand.invokeCloseOn.closeButtonClick`	`boolean`	`true`	Shows and enables the close button.

Option	Type	Default	Purpose
`toolbar.title`	`string`	`mermaid`	Sets the default toolbar title.
`toolbar.fontSize`	`string` or `number`	`14px`	Sets the toolbar font size.
`toolbar.fullscreenToolbarScale`	`number`	`1.25`	Scales toolbar text and icons in fullscreen.
`toolbar.buttons.copy`	`boolean`	`true`	Shows the copy-source button.
`toolbar.buttons.fullscreen`	`boolean`	`true`	Shows the fullscreen button.
`toolbar.buttons.expand`	`boolean`	`true`	Shows the expand button.

loader.init, page configuration, and direct component configuration pass values to Mermaid, but this package does not redefine Mermaid's option schema or behavior. Use the official Mermaid configuration documentation for native themes, diagram options, security settings, and directives.