Use o componente prompt para exibir um prompt de IA pronto que os usuários podem copiar para a área de transferência ou abrir diretamente na IDE. A prop description é exibida como o rótulo visível, enquanto o slot padrão contém o texto do prompt que é copiado.
Build a dashboard layout with Nitro UI.
::prompt{description="Build a dashboard layout with Nitro UI."}
You are a Nitro 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
::
Use a prop icon para exibir um ícone ao lado da descrição.
Create a form with validation.
::prompt{description="Create a form with validation." icon="i-lucide-file-pen-line"}
Create a registration form using Nitro 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
::
Use a prop actions para exibir botões adicionais. O botão copy é sempre exibido; as ações disponíveis são cursor, windsurf e 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
::
| Prop | Default | Type |
|---|---|---|
description | string | |
icon | any | |
actions | [] | ("copy" | "cursor" | "windsurf" | "claude")[]The |
ui | { root?: SlotClass; icon?: SlotClass; content?: SlotClass; description?: SlotClass; actions?: SlotClass; } |
| Slot | Type |
|---|---|
default | {} |
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'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
}
}
}
}
})
]
})