v5

[benjamincanac]

Nuxt UI v5 is a theming-led major. The full plan and the discussion live in #6610, this issue tracks what has landed.

We're working on the v5 branch. Prereleases will be published under the next npm tag and the docs will be available at https://ui5.nuxt.com, both starting with the first alpha. Until then, breaking changes are listed in the migration guide on the branch as they land.

Tasks

• Epic A: Design Tokens v2
  • Resolve component colors through --ui-accent and remove theme.colors: refactor(theme)!: resolve colors through --ui-accent and remove theme.colors #7024
• Epic B: Prop & class renames
• Epic C: Component restructures
  • Migrate Drawer to Reka UI's Drawer primitive and drop vaul-vue: feat(Drawer)!: replace vaul-vue with reka-ui primitives #6691
  • Declare every theme class under a slot, single-element components included: refactor(theme)!: declare every class under a slot #6998
  • Rename the base slot to root on layout containers: refactor(theme)!: rename the base slot to root on layout containers #7000
  • Namespace data-slot with the component name: refactor(components)!: namespace data-slot with the component name #7003
• Epic D: Defaults & behavior
• Epic E: Foundation & install contract
  • Optional peer dependencies for Editor, Carousel and Table: feat(components)!: move tiptap, embla and tanstack table to optional peer dependencies #6951
  • Remove the theme.transitions option: refactor(theme)!: remove the theme.transitions option #7018
  • Move theme.defaultVariants to <UTheme :props>: refactor(Theme)!: move theme.defaultVariants to <UTheme :props> #7028
  • Move theme.unstyled to <UTheme unstyled>: refactor(Theme)!: move theme.unstyled to <UTheme unstyled> #7030
  • Remove the *Size slots: refactor(theme)!: remove the *Size slots #7031
  • Prefix theme classes at runtime: refactor(theme)!: prefix classes at runtime #7035
  • Spell out every theme class in the sources: refactor(theme): spell out every theme class #7036
  • Move themes to the runtime and type their sources: refactor(theme): move themes to the runtime and type their sources #7040
  • Ship static themes, no more per-project theme compilation: refactor(module): ship static themes #7037
  • Ship the static CSS, @nuxt/ui/sources + @nuxt/ui/base for cascade layers: refactor(module): ship the static CSS #7043
  • Read the app config through the theme context, the engine stops importing #build/app.config: refactor(theme)!: read the app config through the theme context #7044
  • variants and icons props on <UTheme>: feat(Theme): add variants and icons props #7046
• Epic F: Migration & rollout (migration guide, codemod)
• Epic G: Launch (landing, theme playground)
• Epic H: Own the styling engine
  • Replace tailwind-variants with an in-tree variants engine: refactor(theme)!: replace tailwind-variants with an in-tree variants engine #6964
  • Call tv with the theme and its overrides, keyed by content: refactor(theme)!: call tv with the theme and its overrides #6975
  • Let app.config.ui slot classes win over theme variants: fix(theme)!: let app.config.ui slot classes win over theme variants #6976
  • Resolve app.config.ui variants after the theme variants, activeClass after the theme: fix(theme): resolve app.config.ui variants after the theme variants #6978
  • Rename the ui.tv merge keys and drop deprecated gradient utilities: refactor(theme)!: rename the ui.tv merge keys and drop deprecated gradient utilities #7007
  • Swap tailwind-merge for cn (on hold): refactor(theme)!: swap tailwind-merge for cn behind the merger seam #7011

Release

• Release v5.0.0-alpha.0
• Deploy ui5.nuxt.com from the v5 branch
• Release v5.0.0
• Update templates to v5
• Transfer ui.nuxt.com from v4 to v5, move v4 docs to ui4.nuxt.com
• Publish release notes, blog post and tweet

Feedback

Feedback on the plan goes in #6610, keep this issue for progress. New feature requests and component requests aren't tied to v5 and can be opened as regular issues.