nuxt/ui v3.0.0-beta.1

on GitHub

✨ Highlights

• Tree: new component (#3180)

https://ui3.nuxt.dev/components/tree

🚨 Breaking Changes

• deps: update tailwindcss to ^4.0.8 (#3373)

Tailwind CSS made some breaking changes in 4.0.8 where they don't rely on the module graph to discover classes anymore and where they remove unused CSS variables.

The first issue has been fixed internally in #3373 but for the second you now need to use theme(static) when importing tailwindcss: https://ui3.nuxt.dev/getting-started/theme#theme

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

You can read more about this in #3374

• module: remove devtools in favor of compodium (#3380)

@romhml who initially created the Nuxt UI devtools, moved all the logic into a separate compodium module in #3380 to avoid polluting the @nuxt/ui package with 7MB+ of component metas.

This module now works for any component in your app, not just Nuxt UI ones which gives way more flexibility.

You can install the module in your Nuxt application with one command:

npx nuxi module add compodium

• useOverlay: handle programmatic modals and slideovers (#3279)

@genu who initially created the useModal and useSlideover composables in Nuxt UI v2 made a significant refactor in #3279 which merges the two composables into a single useOverlay composable. This is a big breaking change but brings lots of improvements as you can read in the PR.

🚀 Features

• Form: add prop to disable state transformation (#3356) (015ceac)
• module: remove devtools in favor of compodium (#3380) (7a8c00c)
• Table: add select event (#2822) (0668a39)
• Tree: new component (#3180) (71728d3)
• useOverlay: handle programmatic modals and slideovers (#3279) (108d36f)

🐛 Bug Fixes

• Avatar: render on SSR (67e5465)
• CommandPalette: wrong ellipsis color (ada04f6)
• components: missing $attrs bind (#3152) (fb36df5)
• Drawer/Modal/Slideover: disable close autofocus (ae30f94), closes #3227
• Form: ensure loading state resets to false after an error (#3359) (19d76c8)
• Link: improve external links handling in vue (b53f77b)
• Modal/Slideover: add wrapper around title & description (bc01136)
• Modal/Slideover: fixed header height (d33a83e), closes #3333
• Modal: use dvh unit (aefa09c)
• module: use key when merging modules options (9821894)
• Tooltip: bind $attrs on trigger (637f5d3), closes #3339 #2897
• vite: exclude @nuxt/ui from vite pre-optimization (#3352) (09492f7)

👋 New Contributors

• @alihardan made their first contribution in #3359

Full Changelog: v3.0.0-alpha.13...v3.0.0-beta.1