ProsePrompt
通过一键复制和IDE集成显示预构建的AI提示。
用法
使用prompt组件显示一个预构建的AI提示，用户可以将其复制到剪贴板或直接在IDE中打开。description道具显示为可见标签，而默认插槽包含复制的提示文本。
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
使用icon道具在描述旁边显示一个图标。
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
使用actions属性显示其他按钮。copy按钮始终显示。可用操作为cursor、windsurf和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 | {} |
Theme
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