Code

Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.

Code blocks

Code blocks are rendered by the ProsePre component of @nuxtjs/mdc and code highlighting is done underneath by Shiki.

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
Prop Default Type
icon

string | object

code

string

language

string

filename

string

highlights

number[]

hideHeader

boolean

meta

string

ui

{ root?: ClassNameValue; header?: ClassNameValue; filename?: ClassNameValue; icon?: ClassNameValue; copy?: ClassNameValue; base?: ClassNameValue; }

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      pre: {
        slots: {
          root: 'relative my-5 group',
          header: 'flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3',
          filename: 'text-default text-sm/6',
          icon: 'size-4 shrink-0',
          copy: 'absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition',
          base: 'group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none'
        },
        variants: {
          filename: {
            true: {
              root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5'
            }
          }
        }
      },
      codeIcon: {
        'package.json': 'i-vscode-icons-file-type-node',
        'tsconfig.json': 'i-vscode-icons-file-type-tsconfig',
        '.npmrc': 'i-vscode-icons-file-type-npm',
        '.editorconfig': 'i-vscode-icons-file-type-editorconfig',
        '.eslintrc': 'i-vscode-icons-file-type-eslint',
        '.eslintrc.cjs': 'i-vscode-icons-file-type-eslint',
        '.eslintignore': 'i-vscode-icons-file-type-eslint',
        'eslint.config.js': 'i-vscode-icons-file-type-eslint',
        'eslint.config.mjs': 'i-vscode-icons-file-type-eslint',
        'eslint.config.cjs': 'i-vscode-icons-file-type-eslint',
        '.gitignore': 'i-vscode-icons-file-type-git',
        'yarn.lock': 'i-vscode-icons-file-type-yarn',
        '.env': 'i-vscode-icons-file-type-dotenv',
        '.env.example': 'i-vscode-icons-file-type-dotenv',
        '.vscode/settings.json': 'i-vscode-icons-file-type-vscode',
        nuxt: 'i-vscode-icons-file-type-nuxt',
        '.nuxtrc': 'i-vscode-icons-file-type-nuxt',
        '.nuxtignore': 'i-vscode-icons-file-type-nuxt',
        'nuxt.config.js': 'i-vscode-icons-file-type-nuxt',
        'nuxt.config.ts': 'i-vscode-icons-file-type-nuxt',
        'nuxt.schema.ts': 'i-vscode-icons-file-type-nuxt',
        'tailwind.config.js': 'i-vscode-icons-file-type-tailwind',
        'tailwind.config.ts': 'i-vscode-icons-file-type-tailwind',
        vue: 'i-vscode-icons-file-type-vue',
        ts: 'i-vscode-icons-file-type-typescript',
        tsx: 'i-vscode-icons-file-type-typescript',
        mjs: 'i-vscode-icons-file-type-js',
        cjs: 'i-vscode-icons-file-type-js',
        js: 'i-vscode-icons-file-type-js',
        jsx: 'i-vscode-icons-file-type-js',
        md: 'i-vscode-icons-file-type-markdown',
        py: 'i-vscode-icons-file-type-python',
        cs: 'i-vscode-icons-file-type-csharp',
        asm: 'i-vscode-icons-file-type-assembly',
        f: 'i-vscode-icons-file-type-fortran',
        hs: 'i-vscode-icons-file-type-haskell',
        fs: 'i-vscode-icons-file-type-fsharp',
        kt: 'i-vscode-icons-file-type-kotlin',
        rs: 'i-vscode-icons-file-type-rust',
        rb: 'i-vscode-icons-file-type-ruby',
        lsp: 'i-vscode-icons-file-type-lisp',
        ps1: 'i-vscode-icons-file-type-powershell',
        psd1: 'i-vscode-icons-file-type-powershell',
        psm1: 'i-vscode-icons-file-type-powershell',
        go: 'i-vscode-icons-file-type-go',
        gleam: 'i-vscode-icons-file-type-gleam',
        bicep: 'i-vscode-icons-file-type-bicep',
        bicepparam: 'i-vscode-icons-file-type-bicep',
        exs: 'i-vscode-icons-file-type-elixir',
        erl: 'i-vscode-icons-file-type-erlang',
        sbt: 'i-vscode-icons-file-type-scala',
        h: 'i-vscode-icons-file-type-cppheader',
        ino: 'i-vscode-icons-file-type-arduino',
        pl: 'i-vscode-icons-file-type-perl',
        jl: 'i-vscode-icons-file-type-julia',
        dart: 'i-vscode-icons-file-type-dartlang',
        ico: 'i-vscode-icons-file-type-favicon',
        npm: 'i-vscode-icons-file-type-npm',
        pnpm: 'i-vscode-icons-file-type-pnpm',
        npx: 'i-vscode-icons-file-type-npm',
        yarn: 'i-vscode-icons-file-type-yarn',
        bun: 'i-vscode-icons-file-type-bun',
        yml: 'i-vscode-icons-file-type-yaml',
        terminal: 'i-lucide-terminal'
      }
    }
  }
})
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: {
          pre: {
            slots: {
              root: 'relative my-5 group',
              header: 'flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3',
              filename: 'text-default text-sm/6',
              icon: 'size-4 shrink-0',
              copy: 'absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition',
              base: 'group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none'
            },
            variants: {
              filename: {
                true: {
                  root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5'
                }
              }
            }
          },
          codeIcon: {
            'package.json': 'i-vscode-icons-file-type-node',
            'tsconfig.json': 'i-vscode-icons-file-type-tsconfig',
            '.npmrc': 'i-vscode-icons-file-type-npm',
            '.editorconfig': 'i-vscode-icons-file-type-editorconfig',
            '.eslintrc': 'i-vscode-icons-file-type-eslint',
            '.eslintrc.cjs': 'i-vscode-icons-file-type-eslint',
            '.eslintignore': 'i-vscode-icons-file-type-eslint',
            'eslint.config.js': 'i-vscode-icons-file-type-eslint',
            'eslint.config.mjs': 'i-vscode-icons-file-type-eslint',
            'eslint.config.cjs': 'i-vscode-icons-file-type-eslint',
            '.gitignore': 'i-vscode-icons-file-type-git',
            'yarn.lock': 'i-vscode-icons-file-type-yarn',
            '.env': 'i-vscode-icons-file-type-dotenv',
            '.env.example': 'i-vscode-icons-file-type-dotenv',
            '.vscode/settings.json': 'i-vscode-icons-file-type-vscode',
            nuxt: 'i-vscode-icons-file-type-nuxt',
            '.nuxtrc': 'i-vscode-icons-file-type-nuxt',
            '.nuxtignore': 'i-vscode-icons-file-type-nuxt',
            'nuxt.config.js': 'i-vscode-icons-file-type-nuxt',
            'nuxt.config.ts': 'i-vscode-icons-file-type-nuxt',
            'nuxt.schema.ts': 'i-vscode-icons-file-type-nuxt',
            'tailwind.config.js': 'i-vscode-icons-file-type-tailwind',
            'tailwind.config.ts': 'i-vscode-icons-file-type-tailwind',
            vue: 'i-vscode-icons-file-type-vue',
            ts: 'i-vscode-icons-file-type-typescript',
            tsx: 'i-vscode-icons-file-type-typescript',
            mjs: 'i-vscode-icons-file-type-js',
            cjs: 'i-vscode-icons-file-type-js',
            js: 'i-vscode-icons-file-type-js',
            jsx: 'i-vscode-icons-file-type-js',
            md: 'i-vscode-icons-file-type-markdown',
            py: 'i-vscode-icons-file-type-python',
            cs: 'i-vscode-icons-file-type-csharp',
            asm: 'i-vscode-icons-file-type-assembly',
            f: 'i-vscode-icons-file-type-fortran',
            hs: 'i-vscode-icons-file-type-haskell',
            fs: 'i-vscode-icons-file-type-fsharp',
            kt: 'i-vscode-icons-file-type-kotlin',
            rs: 'i-vscode-icons-file-type-rust',
            rb: 'i-vscode-icons-file-type-ruby',
            lsp: 'i-vscode-icons-file-type-lisp',
            ps1: 'i-vscode-icons-file-type-powershell',
            psd1: 'i-vscode-icons-file-type-powershell',
            psm1: 'i-vscode-icons-file-type-powershell',
            go: 'i-vscode-icons-file-type-go',
            gleam: 'i-vscode-icons-file-type-gleam',
            bicep: 'i-vscode-icons-file-type-bicep',
            bicepparam: 'i-vscode-icons-file-type-bicep',
            exs: 'i-vscode-icons-file-type-elixir',
            erl: 'i-vscode-icons-file-type-erlang',
            sbt: 'i-vscode-icons-file-type-scala',
            h: 'i-vscode-icons-file-type-cppheader',
            ino: 'i-vscode-icons-file-type-arduino',
            pl: 'i-vscode-icons-file-type-perl',
            jl: 'i-vscode-icons-file-type-julia',
            dart: 'i-vscode-icons-file-type-dartlang',
            ico: 'i-vscode-icons-file-type-favicon',
            npm: 'i-vscode-icons-file-type-npm',
            pnpm: 'i-vscode-icons-file-type-pnpm',
            npx: 'i-vscode-icons-file-type-npm',
            yarn: 'i-vscode-icons-file-type-yarn',
            bun: 'i-vscode-icons-file-type-bun',
            yml: 'i-vscode-icons-file-type-yaml',
            terminal: 'i-lucide-terminal'
          }
        }
      }
    })
  ]
})

Language

Syntax highlighting is available for dozens of programming languages.

<script setup lang="ts">
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <UButton @click="updateMessage">
      Click me
    </UButton>
  </div>
</template>

By default for syntax highlighting, material-theme-lighter and material-theme-palenight VSCode themes are used for light & dark mode respectively. You can change this in your nuxt.config.ts through the content.build.markdown.highlight key.

Filename

Code blocks support filename display with automatic icon detection.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

The filename icon is rendered by the ProseCodeIcon component and contains a set of predefined icons which you can customize in your app.config.ts:

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone',
        config: 'i-lucide-settings',
        package: 'i-lucide-package'
      }
    }
  }
})

Copy button

Every code-block has a built-in copy button that will copy the code to your clipboard.

You can change the icon in your app.config.ts through the ui.icons.copy and ui.icons.copyCheck keys:

app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})

Line highlighting

Highlight specific lines to draw attention to important parts.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'], // This line is highlighted
  css: ['~/assets/css/main.css']
})

Code diff

Use the diff language to show changes between code versions.

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
-   '@nuxt/ui-pro'
+   '@nuxt/ui'
  ]
})

Inline code

Inline code snippets are rendered by the ProseCode component of @nuxtjs/mdc.

inline code

Prop Default Type
lang

string

color

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      code: {
        base: 'px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block',
        variants: {
          color: {
            primary: 'border border-primary/25 bg-primary/10 text-primary',
            secondary: 'border border-secondary/25 bg-secondary/10 text-secondary',
            success: 'border border-success/25 bg-success/10 text-success',
            info: 'border border-info/25 bg-info/10 text-info',
            warning: 'border border-warning/25 bg-warning/10 text-warning',
            error: 'border border-error/25 bg-error/10 text-error',
            neutral: 'border border-muted text-highlighted bg-muted'
          }
        },
        defaultVariants: {
          color: 'neutral'
        }
      }
    }
  }
})
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: {
          code: {
            base: 'px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block',
            variants: {
              color: {
                primary: 'border border-primary/25 bg-primary/10 text-primary',
                secondary: 'border border-secondary/25 bg-secondary/10 text-secondary',
                success: 'border border-success/25 bg-success/10 text-success',
                info: 'border border-info/25 bg-info/10 text-info',
                warning: 'border border-warning/25 bg-warning/10 text-warning',
                error: 'border border-error/25 bg-error/10 text-error',
                neutral: 'border border-muted text-highlighted bg-muted'
              }
            },
            defaultVariants: {
              color: 'neutral'
            }
          }
        }
      }
    })
  ]
})

Color

Use the color prop to change the color of the inline code. Defaults to neutral.

inline code

Lang

Use the lang prop to specify the language of the inline code.

nuxt.config.ts

Images and embeds

Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.

Accordion

Create expandable content sections for better information organization.