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: ['una-content'],

  // Here
  content: {
    xxx
  },

  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,
      },
    },
  },
})
Una Content
Customizing una-content.
Overriding
Replacing una-content components with custom vue components.