nuxt-ui

Use UDashboardGroup with UDashboardSidebar and UDashboardPanel. The sidebar supports resizable and collapsible props, and pages need definePageMeta with the dashboard layout. Put UDashboardNavbar in the panel header slot and scrollable content in the body slot.

Use UModal for confirmations and focused tasks, USlideover for detail panels and settings that slide from the edge, and UDrawer for mobile bottom sheets. For programmatic overlays without template state, use the useOverlay composable.

Yes, @nuxt/ui supports Vue via the @nuxt/ui/vite plugin and the vue-plugin registered in main.ts. It also works with Laravel and AdonisJS through Vite plus Inertia by passing the router inertia option.

Define all 11 shades of your brand color in CSS with @theme static, then assign it via ui colors primary in app.config.ts or the Vite plugin config. Always use semantic colors like primary and neutral instead of raw Tailwind palette classes.

UApp provides the toast container, tooltip provider, programmatic overlay context, and i18n locale support. Without it, useToast, tooltips, and useOverlay-based modals will not function.

Wrap fields in UForm with a Zod schema and reactive state, and give each UFormField a name matching the schema key. The submit event only fires when validation passes, and event.data contains the validated values.