Field
Learn how to use the ProseField component in your Nuxt app.
A field, prop or parameter to display in your content.
name
string required
The
description can be set as prop or in the default slot with full markdown support.::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 |
|
The element or component this component should render as. |
name |
The name of the field. | |
type |
Expected type of the field’s value | |
description |
Description of the field | |
required |
Indicate whether the field is required | |
ui |
|
Theme
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