Nuxt Content

Configuring the Nuxt Content module.

The default nuxt content config can be overridden in nuxt.config.ts.

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  extends: ['shadcn-docs-nuxt'],

  // Here
  content: {
    // ...
  },

  compatibilityDate: '2024-07-06',
});

Syntax Highlighting

Theme

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    highlight: {
      theme: {
        // Default theme
        default: 'github-light',
        // Theme used in dark-mode
        dark: 'github-dark',
      }
    }
  }
});

Languages

The default highlighted languages are: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'].

If you need to highlight other languages, add them in your nuxt.config.ts.

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    highlight: {
      langs: ['c', 'cpp'],
    },
  },
});

Default Config

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    documentDriven: true,
    highlight: {
      theme: {
        default: 'github-light',
        dark: 'github-dark',
      },
      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'],
    },
    navigation: {
      fields: ['icon'],
    },
    experimental: {
      search: {
        indexed: true,
      },
    },
  },
});
Edit this page
Overview
Customizing shadcn-docs-nuxt.
OG Image
Customizing the dynamic OG Image.