From fb1fc58bf9d67d44b89b45761a81f7420cd7aab4 Mon Sep 17 00:00:00 2001 From: Ray Tien Date: Mon, 22 Jun 2026 04:58:29 +0800 Subject: [PATCH] feat(nuxt-ui): update stack data to v4 (#345) Breaking changes fixed: - Row 8/9: icon format corrected from 'lucide:home' (v3) to 'i-lucide-home' (v4 Iconify i-prefix) - Row 18: useOverlay API updated from .open(Component, {props}) to .create(Component).open({props}) New v4 guidelines added (rows 51-70): - Auto-registered modules: do not re-add @nuxt/icon @nuxt/fonts @nuxtjs/color-mode - Official nuxi init templates for project bootstrapping - Local Iconify JSON install for SSR reliability - Global icon overrides via appConfig.ui.icons - New form components: UFileUpload, UInputDate, UInputTags, UColorPicker - New data components: UTree, UMarquee - UContextMenu for right-click menus - Awaiting overlay result Promise for confirmation dialogs - UCommandPalette grouped items and extractShortcuts - UHeader/UFooter/UPageAside layout components - ClientOnly pattern for color mode hydration safety - Generated theme file (.nuxt/ui/) for slot discovery - defineShortcuts whenever condition guard - UApp locale prop for i18n (50+ built-in locales) Sync cli/assets to match src. --- cli/assets/data/stacks/nuxt-ui.csv | 26 ++++++++++++++++++++--- src/ui-ux-pro-max/data/stacks/nuxt-ui.csv | 26 ++++++++++++++++++++--- 2 files changed, 46 insertions(+), 6 deletions(-) diff --git a/cli/assets/data/stacks/nuxt-ui.csv b/cli/assets/data/stacks/nuxt-ui.csv index 7146e84..caf4ff6 100644 --- a/cli/assets/data/stacks/nuxt-ui.csv +++ b/cli/assets/data/stacks/nuxt-ui.csv @@ -6,8 +6,8 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL 5,Components,Use semantic color props,Use semantic colors like primary secondary error,color="primary" color="error",Hardcoded colors,"","",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system 6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,variant="soft" variant="outline",Custom button classes,"","",Medium,https://ui.nuxt.com/docs/components/button 7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,size="sm" size="lg",Arbitrary sizing classes,"","",Low,https://ui.nuxt.com/docs/components/button -8,Icons,Use icon prop with Iconify format,Nuxt UI supports Iconify icons via icon prop,icon="lucide:home" icon="heroicons:user",i-lucide-home format,"","",Medium,https://ui.nuxt.com/docs/getting-started/integrations/icons/nuxt -9,Icons,Use leadingIcon and trailingIcon,Position icons with dedicated props for clarity,leadingIcon="lucide:plus" trailingIcon="lucide:arrow-right",Manual icon positioning,"","Add",Low,https://ui.nuxt.com/docs/components/button +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),"","",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt +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,"","Add",Low,https://ui.nuxt.com/docs/components/button 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' } } })","",High,https://ui.nuxt.com/docs/getting-started/theme/design-system 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 12,Theming,Extend semantic colors in nuxt.config,Register new colors like tertiary in theme.colors,theme.colors array in ui config,Use undefined colors,"ui: { theme: { colors: ['primary', 'tertiary'] } }"," without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system @@ -16,7 +16,7 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL 15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"","",Medium,https://ui.nuxt.com/docs/components/form 16,Forms,Use validateOn prop for validation timing,Control when validation triggers (blur change input),validateOn="['blur']" for performance,Always validate on input,""," (validates on every keystroke)",Low,https://ui.nuxt.com/docs/components/form 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,"",,Medium,https://ui.nuxt.com/docs/components/modal -18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically without template refs,useOverlay().open(MyModal),Template ref and manual control,"const overlay = useOverlay(); overlay.open(MyModal, { props })","const modal = ref(); modal.value.open()",Medium,https://ui.nuxt.com/docs/components/modal +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 19,Overlays,Use title and description props,Built-in header support for overlays,title="Confirm" description="Are you sure?",Manual header content,"","",Low,https://ui.nuxt.com/docs/components/modal 20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,,