ProsePrompt
Geef vooraf gebouwde AI-prompts weer met kopiëren met één klik en IDE-integratie.
Gebruik
Gebruik de prompt-component om een vooraf gebouwde AI-prompt weer te geven die gebruikers naar hun klembord kunnen kopiëren of rechtstreeks in hun IDE kunnen openen. De description-prop wordt weergegeven als de zichtbare
label, terwijl de standaardsleuf de prompttekst bevat die wordt gekopieerd.
Build a dashboard layout with Nuxt UI.
::prompt{description="Build a dashboard layout with Nuxt UI."}
You are a Nuxt UI expert. Help me build a dashboard layout with a collapsible sidebar and a sticky top navbar.
Requirements:
- Use `UDashboardPanel`, `UDashboardSidebar`, and `UDashboardNavbar`
- Use semantic color tokens like `bg-elevated` and `text-muted` for theming
- The sidebar should include navigation links with icons using `UNavigationMenu`
- The navbar should display a breadcrumb, a search button, and a user dropdown menu
- The layout must be fully responsive and collapse the sidebar on mobile
::Icoon
Gebruik de icon prop om een pictogram naast de beschrijving weer te geven.
Create a form with validation.
::prompt{description="Create a form with validation." icon="i-lucide-file-pen-line"}
Create a registration form using Nuxt UI with Zod schema validation.
Requirements:
- Use `UForm` with a Zod schema for validation
- Add `UFormField` wrapping each input: name (`UInput`), email (`UInput` type email), role (`USelect` with options Admin, Editor, Viewer)
- Include a submit `UButton` with loading state
- Display inline error messages below each field
- On successful submit, show a `UToast` notification
::Acties
Gebruik de actions prop om extra knoppen weer te geven. De copy knop wordt altijd weergegeven. De beschikbare acties zijn cursor, windsurf en claude.
Add a color mode toggle.
::prompt{description="Add a color mode toggle." icon="i-lucide-sun-moon" actions="cursor,claude"}
Add a color mode toggle to my Nuxt app.
Requirements:
- Use `useColorMode` from `@nuxtjs/color-mode` to manage the current mode
- Render a `UButton` with `variant="ghost"` that cycles between `light`, `dark`, and `system` on click
- Update the button icon dynamically: `i-lucide-sun` for light, `i-lucide-moon` for dark, `i-lucide-monitor` for system
- Add a tooltip using `UTooltip` that shows the current active mode
::API
Props
| Prop | Default | Type |
|---|---|---|
description | string | |
icon | any | |
actions | [] | ("copy" | "cursor" | "windsurf" | "claude")[]The |
ui | { root?: SlotClass; icon?: SlotClass; content?: SlotClass; description?: SlotClass; actions?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Thema
app.config.ts
export default defineAppConfig({
ui: {
prose: {
prompt: {
slots: {
root: 'relative flex flex-wrap items-center gap-2 border border-muted bg-muted rounded-md px-4 py-3 my-5 last:mb-0',
icon: 'size-4 shrink-0 text-highlighted',
content: 'min-w-0',
description: 'text-sm/6 text-default font-medium',
actions: 'flex flex-wrap items-center gap-1.5 ms-auto'
}
}
}
}
})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: {
prompt: {
slots: {
root: 'relative flex flex-wrap items-center gap-2 border border-muted bg-muted rounded-md px-4 py-3 my-5 last:mb-0',
icon: 'size-4 shrink-0 text-highlighted',
content: 'min-w-0',
description: 'text-sm/6 text-default font-medium',
actions: 'flex flex-wrap items-center gap-1.5 ms-auto'
}
}
}
}
})
]
})Wijzigingsgelog
No recent changes