CodeGroup

Learn how to use the ProseCodeGroup component in your Nuxt app.

Wrap your code-blocks around a code-group component to group them together in tabs.

pnpm add @nuxt/ui

::code-group

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

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

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

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

::
Like the ProsePre component, the CodeGroup handles filenames, icons and copy button.

API

Props

Prop Default Type
defaultValue

'0'

string

The default tab to select.

sync

string

Sync the selected tab with a local storage key.

modelValue

string

ui

{ root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; }

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeGroup: {
        slots: {
          root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
          list: 'relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2',
          indicator: 'absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs',
          trigger: [
            'relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none',
            'transition-colors'
          ],
          triggerIcon: 'size-4 shrink-0',
          triggerLabel: 'truncate'
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          codeGroup: {
            slots: {
              root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
              list: 'relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2',
              indicator: 'absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs',
              trigger: [
                'relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none',
                'transition-colors'
              ],
              triggerIcon: 'size-4 shrink-0',
              triggerLabel: 'truncate'
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

CodeCollapse

Learn how to use the ProseCodeCollapse component in your Nuxt app.

CodePreview

Learn how to use the ProseCodePreview component in your Nuxt app.