Prompt Soon
Display pre-built AI prompts with one-click copy and IDE integration.
Usage
Use the prompt component to display a pre-built AI prompt that users can copy to their clipboard or open directly in their IDE. The description prop is shown as the visible label, while the default slot contains the prompt text that gets copied.
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
::
Icon
Use the icon prop to display an icon next to the 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
Use the actions prop to control which buttons are displayed. Defaults to ["copy"]. Available actions are copy, cursor and windsurf.
Add a color mode toggle.
::prompt{description="Add a color mode toggle." icon="i-lucide-sun-moon" actions="copy,cursor,windsurf"}
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"] | ("copy" | "cursor" | "windsurf")[] |
ui | { root?: ClassNameValue; icon?: ClassNameValue; content?: ClassNameValue; description?: ClassNameValue; actions?: ClassNameValue; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Theme
app.config.ts
export default defineAppConfig({
ui: {
prose: {
prompt: {
slots: {
root: 'relative flex 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: 'flex-1 min-w-0',
description: 'text-sm/6 text-default font-medium',
actions: 'flex items-center shrink-0 gap-1.5'
}
}
}
}
})
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 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: 'flex-1 min-w-0',
description: 'text-sm/6 text-default font-medium',
actions: 'flex items-center shrink-0 gap-1.5'
}
}
}
}
})
]
})
Changelog
No recent changes