UxCodeBlock

components/ux/CodeBlock.vue

Code block with copy button, optional labeled header, collapse toggle, and dark/light themes.

Vue

import { QMap } from '@qpoint-io/qmap'

Scenarios

nuxt.config.ts

export default defineNuxtConfig({
  extends: ['@qpoint-io/q-nuxt-layer'],
})

npm install @qpoint-io/q-nuxt-layer

export default defineNuxtConfig({
  extends: ['@qpoint-io/q-nuxt-layer'],
})

const aVeryLongSingleLineThatShouldScrollHorizontallyInsteadOfWrapping = useSomething({ retries: 3, timeoutMs: 30000, backoff: 'exponential' })

components/ux/CodeBlock.vue

Usage

Prop	Type	Default	Description
code	String	—	The code to display and copy (required)
label	String	''	Header label; header renders only when set or collapsible
collapsible	Boolean	false	Header toggles the block open/closed
defaultOpen	Boolean	false	Initial open state when collapsible
theme	String	'dark'	dark (grey-900) or light (grey-50)