provisoirement
Affichez des invites AI prédéfinies avec copie en un clic et intégration IDE.
Utilisation
Utilisez le composant prompt pour afficher une invite AI prédéfinie que les utilisateurs peuvent copier dans leur presse-papiers ou ouvrir directement dans leur IDE. La prop description est affichée comme l'étiquette visible, tandis que l'emplacement par défaut contient le texte de l'invite qui est copié.
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
::icône
Utilisez le prop icon pour afficher une icône à côté de la description.
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
::Actions
Utilisez la prop actions pour afficher des boutons supplémentaires. Le bouton copy est toujours affiché. Les actions disponibles sont cursor, windsurf et 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 | {} |
Thème
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'
}
}
}
}
})
]
})Changelog
No recent changes