ProComponentsProse

CodeGroup

GitHub

Group code blocks together in tabs.

Usage

Wrap your code blocks around a CodeGroup component:

pnpm add @nuxt/ui

::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```
::

Like the CodeBlock component, filenames, icons and copy buttons are automatically supported.

export default defineNuxtConfig({
  ui: {
    icons: ['heroicons', 'simple-icons', 'logos']
  }
})

Props

CodeBlock

A code-block with automatic syntax highlighting, filename and copy button.

Field

A field, prop or parameter to display in your content.