Markdown

How to write docs with the MDC syntax.

MDC Syntax

Read the detailed MDC usage guide in the Nuxt Content Docs.

Components

See MDC components provided by shadcn-docs-nuxt.

VS Code Integration

The MDC extension

Nuxt MDC is a VS Code extension that provides syntax highlighting and autocompletion for the MDC syntax.

Launch VS Code Quick Open Ctrl + P, paste the following command, and press enter.

ext install Nuxt.mdc

Enable component metadata completions

VSCode settings

.vscode/settings.json
{
  "mdc.enableComponentMetadataCompletions": true}

Install the nuxt-component-meta module

Add nuxt-component-meta dependency to your project:

npm
pnpm
bun
yarn
npm i nuxt-component-meta

Add nuxt-component-meta to the modules section of your nuxt.config.ts and optionally configure the module:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-component-meta'],
});

Once your project has been built or running on the dev server, the extension will automatically scan your project for component metadata and provide suggestions based on the components discovered with zero additional configuration.

Tips

Hide title from toc

0.4.7

Set title id to hide-toc will hide the heading from toc.

:h2[Footnotes]{id="hide-toc"}
Edit this page
Installation
How to install shadcn-docs-nuxt in your app.
Pages
Front matter attributes used in shadcn-docs-nuxt.