ui-ux-pro-max-skill/cli/assets/data/stacks/nuxt-ui.csv

1	No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL	Applies To	Status	Verified At
2	1	Installation	Add Nuxt UI module	Install and configure Nuxt UI in your Nuxt project	pnpm add @nuxt/ui and add to modules	Manual component imports	modules: ['@nuxt/ui']	import { UButton } from '@nuxt/ui'	High	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
3	2	Installation	Import Tailwind and Nuxt UI CSS	Required CSS imports in main.css file	@import tailwindcss and @import @nuxt/ui	Skip CSS imports	@import "tailwindcss"; @import "@nuxt/ui";	No CSS imports	High	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
4	3	Installation	Wrap app with UApp component	UApp provides global configs for Toast Tooltip and overlays	<UApp> wrapper in app.vue	Skip UApp wrapper	<UApp><NuxtPage/></UApp>	<NuxtPage/> without wrapper	High	https://ui.nuxt.com/docs/components/app	nuxt-ui 4.10	active	2026-08-13
5	4	Components	Use U prefix for components	All Nuxt UI components use U prefix by default	UButton UInput UModal	Button Input Modal	<UButton>Click</UButton>	<Button>Click</Button>	Medium	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
6	5	Components	Use semantic color props	Use semantic colors like primary secondary error	color="primary" color="error"	Hardcoded colors	<UButton color="primary">	<UButton class="bg-green-500">	Medium	https://ui.nuxt.com/docs/getting-started/theme/design-system	nuxt-ui 4.10	active	2026-08-13
7	6	Components	Use variant prop for styling	Nuxt UI provides solid outline soft subtle ghost link variants	variant="soft" variant="outline"	Custom button classes	<UButton variant="soft">	<UButton class="border bg-transparent">	Medium	https://ui.nuxt.com/docs/components/button	nuxt-ui 4.10	active	2026-08-13
8	7	Components	Use size prop consistently	Components support xs sm md lg xl sizes	size="sm" size="lg"	Arbitrary sizing classes	<UButton size="lg">	<UButton class="text-xl px-6">	Low	https://ui.nuxt.com/docs/components/button	nuxt-ui 4.10	active	2026-08-13
9	8	Icons	Use i-{collection}-{name} format for icons	Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy	i-lucide-home i-heroicons-user format	lucide:home format (v3 syntax)	<UButton icon="i-lucide-home">	<UButton icon="lucide:home">	High	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
10	9	Icons	Use leadingIcon and trailingIcon props	Position icons with dedicated props for clarity	leadingIcon="i-lucide-plus" trailingIcon="i-lucide-arrow-right"	Manual icon positioning or slots	<UButton leadingIcon="i-lucide-plus" label="Add">	<UButton><UIcon name="i-lucide-plus"/>Add</UButton>	Low	https://ui.nuxt.com/docs/components/button	nuxt-ui 4.10	active	2026-08-13
11	10	Theming	Configure colors in app.config.ts	Runtime color configuration without restart	ui.colors.primary in app.config.ts	Hardcoded colors in components	defineAppConfig({ ui: { colors: { primary: 'blue' } } })	<UButton class="bg-blue-500">	High	https://ui.nuxt.com/docs/getting-started/theme/design-system	nuxt-ui 4.10	active	2026-08-13
12	11	Theming	Use @theme directive for custom colors	Define design tokens in CSS with Tailwind @theme	@theme { --color-brand-500: #xxx }	Inline color definitions	@theme { --color-brand-500: #ef4444; }	:style="{ color: '#ef4444' }"	Medium	https://ui.nuxt.com/docs/getting-started/theme/design-system	nuxt-ui 4.10	active	2026-08-13
13	12	Theming	Register and map semantic colors	Register extra semantic color names at build time then map them to a palette in app.config	nuxt.config ui.theme.colors plus app.config ui.colors	Use an unregistered semantic color	ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet'	<UButton color="tertiary"> without config	Medium	https://ui.nuxt.com/docs/getting-started/theme/design-system	nuxt-ui 4.10	active	2026-08-13
14	13	Forms	Use UForm with schema validation	UForm supports Zod Yup Joi Valibot schemas	:schema prop with validation schema	Manual form validation	<UForm :schema="schema" :state="state">	Manual @blur validation	High	https://ui.nuxt.com/docs/components/form	nuxt-ui 4.10	active	2026-08-13
15	14	Forms	Use UFormField for field wrapper	Provides label error message and validation display	UFormField with name prop	Manual error handling	<UFormField name="email" label="Email">	<div><label>Email</label><UInput/><span>error</span></div>	Medium	https://ui.nuxt.com/docs/components/form-field	nuxt-ui 4.10	active	2026-08-13
16	15	Forms	Handle form submit with @submit	UForm emits submit event with validated data	@submit handler on UForm	@click on submit button	<UForm @submit="onSubmit">	<UButton @click="onSubmit">	Medium	https://ui.nuxt.com/docs/components/form	nuxt-ui 4.10	active	2026-08-13
17	16	Forms	Choose validation timing deliberately	UForm validates on input blur and change by default; input is delayed and begins after blur unless eager	Set validateOn and eager to match the interaction	Assume the default validates every keystroke immediately	<UForm :validateOn="['blur', 'change']">	Describe default UForm as eager input-only validation	Low	https://ui.nuxt.com/docs/components/form	nuxt-ui 4.10	active	2026-08-13
18	17	Overlays	Use v-model:open for overlay control	Modal Slideover Drawer use v-model:open	v-model:open for controlled state	Manual show/hide logic	<UModal v-model:open="isOpen">	<UModal v-if="isOpen">	Medium	https://ui.nuxt.com/docs/components/modal	nuxt-ui 4.10	active	2026-08-13
19	18	Overlays	Use useOverlay composable for programmatic overlays	Open overlays programmatically — v4 API is create().open() not open(Component)	overlay.create(Component).open({ props }) pattern	v3 overlay.open(Component) pattern (removed in v4)	const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' })	overlay.open(MyModal, { props: { title: 'Confirm' } })	High	https://ui.nuxt.com/docs/components/modal	nuxt-ui 4.10	active	2026-08-13
20	19	Overlays	Use title and description props	Built-in header support for overlays	title="Confirm" description="Are you sure?"	Manual header content	<UModal title="Confirm" description="Are you sure?">	<UModal><template #header><h2>Confirm</h2></template>	Low	https://ui.nuxt.com/docs/components/modal	nuxt-ui 4.10	active	2026-08-13
21	20	Dashboard	Use UDashboardSidebar for navigation	Provides collapsible resizable sidebar with mobile support	UDashboardSidebar with header default footer slots	Custom sidebar implementation	<UDashboardSidebar><template #header>...</template></UDashboardSidebar>	<aside class="w-64 border-r">	Medium	https://ui.nuxt.com/docs/components/dashboard-sidebar	nuxt-ui 4.10	active	2026-08-13
22	21	Dashboard	Use UDashboardGroup for layout	Wraps dashboard components with sidebar state management	UDashboardGroup > UDashboardSidebar + UDashboardPanel	Manual layout flex containers	<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>	<div class="flex"><aside/><main/></div>	Medium	https://ui.nuxt.com/docs/components/dashboard-group	nuxt-ui 4.10	active	2026-08-13
23	22	Dashboard	Use UDashboardNavbar for top navigation	Responsive navbar with mobile menu support	UDashboardNavbar in dashboard layout	Custom navbar implementation	<UDashboardNavbar :links="navLinks"/>	<nav class="border-b">	Low	https://ui.nuxt.com/docs/components/dashboard-navbar	nuxt-ui 4.10	active	2026-08-13
24	23	Tables	Use UTable with data and columns props	Powered by TanStack Table with built-in features	:data and :columns props	Manual table markup	<UTable :data="users" :columns="columns"/>	<table><tr v-for="user in users">	High	https://ui.nuxt.com/docs/components/table	nuxt-ui 4.10	active	2026-08-13
25	24	Tables	Define columns with accessorKey	Column definitions use accessorKey for data binding	accessorKey: 'email' in column def	String column names only	{ accessorKey: 'email', header: 'Email' }	['name', 'email']	Medium	https://ui.nuxt.com/docs/components/table	nuxt-ui 4.10	active	2026-08-13
26	25	Tables	Use column cell slots	Customize cell content with the documented column-id slot pattern	#status-cell for a status column	Use the obsolete #cell-status name	<template #status-cell="{ row }">	<template #cell-status="{ row }">	Medium	https://ui.nuxt.com/docs/components/table	nuxt-ui 4.10	active	2026-08-13
27	26	Tables	Enable sorting with TanStack column APIs	Render a header control that calls column.toggleSorting	Use getCanSort and toggleSorting	Invent a sortable property not in the column contract	header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() })	{ accessorKey: 'name', sortable: true }	Low	https://ui.nuxt.com/docs/components/table	nuxt-ui 4.10	active	2026-08-13
28	27	Navigation	Use UNavigationMenu for nav links	Horizontal or vertical navigation with dropdown support	UNavigationMenu with items array	Manual nav with v-for	<UNavigationMenu :items="navItems"/>	<nav><a v-for="item in items">	Medium	https://ui.nuxt.com/docs/components/navigation-menu	nuxt-ui 4.10	active	2026-08-13
29	28	Navigation	Use UBreadcrumb for page hierarchy	Automatic breadcrumb with NuxtLink support	:items array with label and to	Manual breadcrumb links	<UBreadcrumb :items="breadcrumbs"/>	<nav><span v-for="crumb in crumbs">	Low	https://ui.nuxt.com/docs/components/breadcrumb	nuxt-ui 4.10	active	2026-08-13
30	29	Navigation	Use UTabs for tabbed content	Tab navigation with content panels	UTabs with items containing slot content	Manual tab state	<UTabs :items="tabs"/>	<div><button @click="tab=1">	Medium	https://ui.nuxt.com/docs/components/tabs	nuxt-ui 4.10	active	2026-08-13
31	30	Feedback	Use useToast for notifications	Composable for toast notifications	useToast().add({ title description })	Alert components for toasts	const toast = useToast(); toast.add({ title: 'Saved' })	<UAlert v-if="showSuccess">	High	https://ui.nuxt.com/docs/components/toast	nuxt-ui 4.10	active	2026-08-13
32	31	Feedback	Use UAlert for inline messages	Static alert messages with icon and actions	UAlert with title description color	Toast for static messages	<UAlert title="Warning" color="warning"/>	useToast for inline alerts	Medium	https://ui.nuxt.com/docs/components/alert	nuxt-ui 4.10	active	2026-08-13
33	32	Feedback	Use USkeleton for loading states	Placeholder content during data loading	USkeleton with appropriate size	Spinner for content loading	<USkeleton class="h-4 w-32"/>	<UIcon name="lucide:loader" class="animate-spin"/>	Low	https://ui.nuxt.com/docs/components/skeleton	nuxt-ui 4.10	active	2026-08-13
34	33	Color Mode	Use UColorModeButton for theme toggle	Built-in light/dark mode toggle button	UColorModeButton component	Manual color mode logic	<UColorModeButton/>	<button @click="toggleColorMode">	Low	https://ui.nuxt.com/docs/components/color-mode-button	nuxt-ui 4.10	active	2026-08-13
35	34	Color Mode	Use UColorModeSelect for theme picker	Dropdown to select system light or dark mode	UColorModeSelect component	Custom select for theme	<UColorModeSelect/>	<USelect v-model="colorMode" :items="modes"/>	Low	https://ui.nuxt.com/docs/components/color-mode-select	nuxt-ui 4.10	active	2026-08-13
36	35	Customization	Use ui prop for component styling	Override component styles via ui prop	ui prop with slot class overrides	Global CSS overrides	<UButton :ui="{ base: 'rounded-full' }"/>	<UButton class="!rounded-full"/>	Medium	https://ui.nuxt.com/docs/getting-started/theme/components	nuxt-ui 4.10	active	2026-08-13
37	36	Customization	Configure default variants in app.config	Set component default variants under ui component keys	app.config ui.button.defaultVariants	Put component defaults in nuxt.config	defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } })	ui.theme.defaultVariants in nuxt.config	Medium	https://ui.nuxt.com/docs/getting-started/theme/components	nuxt-ui 4.10	active	2026-08-13
38	37	Customization	Use app.config.ts for theme overrides	Runtime theme customization	defineAppConfig with ui key	nuxt.config for runtime values	defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } })	nuxt.config ui.button.size: 'sm'	Medium	https://ui.nuxt.com/docs/getting-started/theme/components	nuxt-ui 4.10	active	2026-08-13
39	38	Performance	Enable component detection	Tree-shake unused component CSS	experimental.componentDetection: true	Include all component CSS	ui: { experimental: { componentDetection: true } }	ui: {} (includes all CSS)	Low	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
40	39	Performance	Use UTable virtualize for large data	Enable virtualization for 1000+ rows	:virtualize prop on UTable	Render all rows	<UTable :data="largeData" virtualize/>	<UTable :data="largeData"/>	Medium	https://ui.nuxt.com/docs/components/table	nuxt-ui 4.10	active	2026-08-13
41	40	Accessibility	Use semantic component props	Components have built-in ARIA support	Use title description label props	Skip accessibility props	<UModal title="Settings">	<UModal><h2>Settings</h2>	Medium	https://ui.nuxt.com/docs/components/modal	nuxt-ui 4.10	active	2026-08-13
42	41	Accessibility	Associate labels with controls	Use UFormField or correct native id and for attributes	UFormField for convenience or explicit label association	Use placeholders as labels	<UFormField label="Email"><UInput/></UFormField>	<UInput placeholder="Email"/>	High	https://ui.nuxt.com/docs/components/form-field	nuxt-ui 4.10	active	2026-08-13
43	42	Content	Use UContentToc for table of contents	Automatic TOC with active heading highlight	UContentToc with :links	Manual TOC implementation	<UContentToc :links="toc"/>	<nav><a v-for="heading in headings">	Low	https://ui.nuxt.com/docs/components/content-toc	nuxt-ui 4.10	active	2026-08-13
44	43	Content	Use UContentSearch for docs search	Command palette for documentation search	UContentSearch with Nuxt Content	Custom search implementation	<UContentSearch/>	<UCommandPalette :groups="searchResults"/>	Low	https://ui.nuxt.com/docs/components/content-search	nuxt-ui 4.10	active	2026-08-13
45	44	AI/Chat	Use UChatMessages for chat UI	Designed for Vercel AI SDK integration	UChatMessages with messages array	Custom chat message list	<UChatMessages :messages="messages"/>	<div v-for="msg in messages">	Medium	https://ui.nuxt.com/docs/components/chat-messages	nuxt-ui 4.10	active	2026-08-13
46	45	AI/Chat	Use UChatPrompt for input	Enhanced textarea for AI prompts	UChatPrompt with v-model	Basic textarea	<UChatPrompt v-model="prompt"/>	<UTextarea v-model="prompt"/>	Medium	https://ui.nuxt.com/docs/components/chat-prompt	nuxt-ui 4.10	active	2026-08-13
47	46	Editor	Use UEditor for rich text	TipTap-based editor binds its document with v-model	UEditor with v-model	Use the undocumented v-model:content binding	<UEditor v-model="content"/>	<UEditor v-model:content="content"/>	Medium	https://ui.nuxt.com/docs/components/editor	nuxt-ui 4.10	active	2026-08-13
48	47	Links	Use to prop for navigation	UButton and ULink support NuxtLink to prop	to="/dashboard" for internal links	href for internal navigation	<UButton to="/dashboard">	<UButton href="/dashboard">	Medium	https://ui.nuxt.com/docs/components/button	nuxt-ui 4.10	active	2026-08-13
49	48	Links	Use to for external URLs	ULink and link-enabled components detect absolute URLs and support target when a new tab is intended	to="https://example.com" target="_blank"	Use href inconsistently or claim an external prop is required	<UButton to="https://example.com" target="_blank">	<UButton href="https://...">	Low	https://ui.nuxt.com/docs/components/link	nuxt-ui 4.10	active	2026-08-13
50	49	Loading	Use loadingAuto on buttons	Automatic loading state from @click promise	loadingAuto prop on UButton	Manual loading state	<UButton loadingAuto @click="async () => await save()">	<UButton :loading="isLoading" @click="save">	Low	https://ui.nuxt.com/docs/components/button	nuxt-ui 4.10	active	2026-08-13
51	50	Loading	Use UForm loadingAuto	Auto-disable form during submit	loadingAuto on UForm (default true)	Manual form disabled state	<UForm @submit="handleSubmit">	<UForm :disabled="isSubmitting">	Low	https://ui.nuxt.com/docs/components/form	nuxt-ui 4.10	active	2026-08-13
52	51	Installation	Let Nuxt UI declare module dependencies	Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration	Configure dependency options at their root keys	Add duplicate module entries without a documented need	icon: { /* opts */ } in nuxt.config	modules: ['@nuxt/ui', '@nuxt/icon']	High	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
53	52	Installation	Use official templates to bootstrap projects	Create a Nuxt project from an official Nuxt UI template	npm create nuxt@latest -- -t ui/dashboard	Manually reconstruct a template	npm create nuxt@latest -- -t ui/dashboard	pnpm create nuxt app then copy dashboard files	Medium	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
54	53	Icons	Install required icon collections locally	Install Iconify JSON collections used by the app; Nuxt UI 4.10 can bundle icons from installed collections	pnpm i @iconify-json/lucide for lucide icons	Rely on an unavailable collection at runtime	pnpm i @iconify-json/lucide	Use i-custom-* without installing its collection	Medium	https://ui.nuxt.com/docs/getting-started/icons/nuxt	nuxt-ui 4.10	active	2026-08-13
55	54	Icons	Override default component icons globally	Components use default icons configurable via appConfig.ui.icons	Set loading close check icons in app.config.ts	Accept default icons for all components	defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } })	<UModal :close-icon="'i-lucide-x'"> on every usage	Low	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
56	55	Forms	Use UFileUpload for file input	Built-in drag-drop and preview support	UFileUpload with v-model and accept prop	Custom input type=file	<UFileUpload v-model="files" accept="image/*" multiple/>	<input type="file" @change="handleFiles">	Medium	https://ui.nuxt.com/docs/components/file-upload	nuxt-ui 4.10	active	2026-08-13
57	56	Forms	Use UInputDate for date selection	Locale-aware date picker built on UCalendar	UInputDate with v-model and locale prop	Third-party date picker libraries	<UInputDate v-model="date" />	<DatePicker v-model="date" />	Medium	https://ui.nuxt.com/docs/components/input-date	nuxt-ui 4.10	active	2026-08-13
58	57	Forms	Use UInputTags for tag input	Multi-value tag input with keyboard support	UInputTags with v-model and max prop	Custom chip input implementation	<UInputTags v-model="tags" :max="5" />	<UInput @keydown.enter="addTag">	Low	https://ui.nuxt.com/docs/components/input-tags	nuxt-ui 4.10	active	2026-08-13
59	58	Forms	Use UColorPicker for color selection	Full-featured color picker with multiple format support	UColorPicker with v-model and format prop	Native input type=color	<UColorPicker v-model="color" format="hex" />	<input type="color" v-model="color">	Low	https://ui.nuxt.com/docs/components/color-picker	nuxt-ui 4.10	active	2026-08-13
60	59	Data	Use UTree for hierarchical data	Built-in tree component with expand/collapse	UTree with items prop containing nested children	Custom recursive component	<UTree :items="treeItems" />	<TreeNode v-for="item in items" :key="item.id">	Low	https://ui.nuxt.com/docs/components/tree	nuxt-ui 4.10	active	2026-08-13
61	60	Data	Use UMarquee for infinite scroll content	Animated infinite scroll band for logos or testimonials	UMarquee with repeat and pauseOnHover props	CSS animation keyframes loop	<UMarquee :repeat="3" pause-on-hover>	<div class="animate-marquee">	Low	https://ui.nuxt.com/docs/components/marquee	nuxt-ui 4.10	active	2026-08-13
62	61	Overlays	Use UContextMenu for right-click menus	Context menu triggered by right-click on children	UContextMenu wrapping target element	Browser default context menu	<UContextMenu :items="menuItems"><div>Right-click me</div></UContextMenu>	<div @contextmenu.prevent="showMenu">	Medium	https://ui.nuxt.com/docs/components/context-menu	nuxt-ui 4.10	active	2026-08-13
63	62	Overlays	Await overlay result for confirmation dialogs	useOverlay returns a result Promise resolving to user action	await instance.result to get confirm/cancel	Emit events from overlay components	const { result } = modal.open(); if (await result) { deleteItem() }	overlay.open(Confirm, { onConfirm: deleteItem })	Medium	https://ui.nuxt.com/docs/components/modal	nuxt-ui 4.10	active	2026-08-13
64	63	Navigation	Use UCommandPalette with grouped items	Command palette supports grouped search with icons and kbds	groups array with id label items	Flat list without categories	<UCommandPalette :groups="[{ id: 'actions', label: 'Actions', items }]"/>	<UCommandPalette :items="flatList"/>	Medium	https://ui.nuxt.com/docs/components/command-palette	nuxt-ui 4.10	active	2026-08-13
65	64	Navigation	Use defineShortcuts with extractShortcuts	Wire keyboard shortcuts from menu item kbds automatically	extractShortcuts(items) + defineShortcuts to sync keybindings	Manually duplicate shortcuts from menu items	defineShortcuts(extractShortcuts(items))	defineShortcuts({ meta_n: () => newFile() }) // duplicated from items	Low	https://ui.nuxt.com/docs/composables/define-shortcuts	nuxt-ui 4.10	active	2026-08-13
66	65	Layout	Use UHeader and UFooter for page layout	Responsive header/footer with built-in mobile menu	UHeader with #default slot for nav UFooter with columns	Custom header/footer from scratch	<UHeader><template #right><UNavigationMenu/></template></UHeader>	<header class="sticky top-0">	Low	https://ui.nuxt.com/docs/components/header	nuxt-ui 4.10	active	2026-08-13
67	66	Layout	Use UPageAside for sidebar content	Sidebar that hides below lg breakpoint automatically	UPageAside for docs and landing page sidebars	Manual hidden lg: classes	<UPageAside><UNavigationMenu orientation="vertical"/></UPageAside>	<aside class="hidden lg:block">	Low	https://ui.nuxt.com/docs/components/page-aside	nuxt-ui 4.10	active	2026-08-13
68	67	Color Mode	Wrap custom color mode toggles in ClientOnly	Prevents hydration mismatch on server-rendered color mode	ClientOnly with fallback placeholder	Direct useColorMode in template without ClientOnly	<ClientOnly><USwitch v-model="isDark"/><template #fallback><div class="size-8"/></template></ClientOnly>	<USwitch v-model="isDark"/> directly in template	Medium	https://ui.nuxt.com/docs/getting-started/installation/nuxt	nuxt-ui 4.10	active	2026-08-13
69	68	Theming	Read generated theme file to find slot names	Nuxt UI generates theme files listing all component slots and variants	Check .nuxt/ui/<component>.ts for slot names	Guess slot names or use trial-and-error	.nuxt/ui/button.ts for UButton slot names	<UButton :ui="{ base: 'rounded-full' }"/> without checking slots	Medium	https://ui.nuxt.com/docs/getting-started/theme/components	nuxt-ui 4.10	active	2026-08-13
70	69	Composables	Use defineShortcuts whenever keyword shortcut	whenever array condition prevents shortcut firing when inactive	whenever: [isFormValid] to guard shortcut execution	Always-on shortcuts that fire in wrong context	defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } })	defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid	Low	https://ui.nuxt.com/docs/composables/define-shortcuts	nuxt-ui 4.10	active	2026-08-13
71	70	i18n	Use UApp locale prop for internationalization	Nuxt UI supports 50+ built-in locales via locale prop on UApp	Import locale from @nuxt/ui/locale and pass to UApp	Manual translation of component UI strings	import { fr } from '@nuxt/ui/locale'; // <UApp :locale="fr">	<UModal title="Fermer"> manually for each component	Low	https://ui.nuxt.com/docs/composables/define-locale	nuxt-ui 4.10	active	2026-08-13