ProseVeld

Documenteer API-parameters, rekwisieten en configuratie-opties duidelijk.

Gebruik

Een veld, prop of parameter om in uw inhoud weer te geven.

name

string required

De description kan worden ingesteld als prop of in de standaard slot met volledige markdown ondersteuning.

::field{name="name" type="string" required}
The `description` can be set as prop or in the default slot with full **markdown** support.
::

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`name`		`string` The name of the field.
`type`		`string` Expected type of the field's value
`description`		`string` Description of the field
`required`		`boolean` Indicate whether the field is required
`ui`		`{ root?: SlotClass; container?: SlotClass; name?: SlotClass; wrapper?: SlotClass; required?: SlotClass; type?: SlotClass; description?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Thema

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      field: {
        slots: {
          root: 'my-5',
          container: 'flex items-center gap-3 font-mono text-sm',
          name: 'font-semibold text-primary',
          wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
          required: 'rounded-sm bg-error/10 text-error px-1.5 py-0.5',
          type: 'rounded-sm bg-elevated text-toned px-1.5 py-0.5',
          description: 'mt-3 text-muted text-sm [&_code]:text-xs/4'
        }
      }
    }
  }
})

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: {
          field: {
            slots: {
              root: 'my-5',
              container: 'flex items-center gap-3 font-mono text-sm',
              name: 'font-semibold text-primary',
              wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
              required: 'rounded-sm bg-error/10 text-error px-1.5 py-0.5',
              type: 'rounded-sm bg-elevated text-toned px-1.5 py-0.5',
              description: 'mt-3 text-muted text-sm [&_code]:text-xs/4'
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Collapsible

Toggle content visibility with smooth expand and collapse animations.

FieldGroup

Group related fields together for comprehensive API documentation.