Skip to content

v3.1.0

Choose a tag to compare

View all tags
@benjamincanac benjamincanac released this 24 Apr 13:23
· 518 commits to v3 since this release
v3.1.0
7983303

✨ Highlights

🎨 Improved Utility Classes

We've enhanced the utility class system to make it more intuitive and easier to use. While CSS variables provided flexibility, writing classes like text-(--ui-text-muted) proved cumbersome. We've introduced three major improvements:

  • Default Color Shades (#3916): New utility classes for default color shades that automatically map to our design system variables. These shades automatically adapt to your color scheme and can be configured for both light and dark modes: https://ui.nuxt.com/getting-started/theme#colors
- <div class="text-(--ui-primary)">
+ <div class="text-primary">

- <div class="bg-(--ui-error)">
+ <div class="bg-error">
  • Neutral Color Utilities (#3629): New utility classes for text, background, border, ring, divide and outline colors that map to our design system variables. These utilities work with opacity modifiers and automatically adapt to your color mode: https://ui.nuxt.com/getting-started/theme#neutral
- <div class="text-(--ui-text-muted)">
+ <div class="text-muted">

- <div class="border-(--ui-border)">
+ <div class="border-default">

- <div class="bg-(--ui-bg-elevated)/50">
+ <div class="bg-elevated/50">
- <div class="rounded-(--ui-radius)">
+ <div class="rounded-sm">

- <div class="rounded-[calc(var(--ui-radius)*1.5)]">
+ <div class="rounded-md">

- <div class="rounded-[calc(var(--ui-radius)*2)]">
+ <div class="rounded-lg">

These changes are fully backward compatible - existing CSS variable-based classes will continue to work while providing a more ergonomic alternative for new code.

🧩 New Components and Features

<script setup lang="ts">
import type { CheckboxGroupItem, CheckboxGroupValue } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<CheckboxGroupValue[]>(['System'])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import type { RadioGroupItem, RadioGroupValue } from '@nuxt/ui'

const items = ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<RadioGroupValue>('System')
</script>

<template>
  <URadioGroup v-model="value" variant="table" :items="items" />
</template>

🌉 Inertia.js Integration

The Vue version now includes built-in support for Inertia.js. Enable it with the inertia: true option in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      inertia: true
    })
  ]
})

This automatically replaces RouterLink with InertiaLink in all components, providing seamless integration with your Inertia.js applications: https://ui.nuxt.com/getting-started/installation/vue#inertia

⚡ Module Builder Update

The module has been updated to use nuxt/[email protected], bringing improved build performance and better TypeScript support.

Following this change, we've refactored how component types are handled which brings full HMR support with app.config.ts changes, this was only working when reloading the page previously.

🚨 Breaking Changes

  • OverlayProvider: return an overlay instance from .open() (#3829) (f3098df)

This PR changes .open() to return an overlay instance with a result promise property instead of returning the promise directly, providing more flexibility:

<script setup lang="ts>
const modal = useOverlay()

- const result = await modal.open({ count: count.value })
+ const instance = modal.open({ count: count.value })
+ const result = await instance.result
</script>

🚀 Features

  • App: add global portal prop (#3688) (29fa462)
  • Carousel: add select event (#3678) (22edfd7)
  • CheckboxGroup: new component (#3862) (9c3d53a)
  • components: add new content-top and content-bottom slots (#3886) (1a46394)
  • Form: add attach prop to opt-out of nested form attachement (#3939) (1a0d7a3)
  • Form: export loading state (#3861) (fdee252)
  • InputMenu/SelectMenu: handle resetSearchTermOnSelect (cea881a), closes #3782
  • InputNumber: add support for stepSnapping & disableWheelChange props (#3731) (f5e6284)
  • Modal/Popover/Slideover: add close:prevent event (#3958) (f486423)
  • module: define default color shades (#3916) (7ac7aa9)
  • module: define neutral utilities (#3629) (d49e0da)
  • module: dynamic rounded-* utilities (#3906) (f9737c8)
  • OverlayProvider: return an overlay instance from .open() (#3829) (f3098df)
  • PinInput: add autofocus / autofocus-delay props (0456670), closes #3717
  • RadioGroup: add card and table variants (#3178) (4d138ad)
  • Select: handle onSelect field in items (8640831)
  • Table: conditionally apply classes to tr and td (#3866) (80dfa88)
  • Tabs: add list-leading and list-trailing slots (#3837) (3447a06)
  • Textarea: add autoresize-delay prop (06414d3), closes #3730
  • Textarea: add icon, loading, etc. props to match Input (cb193f1)
  • Textarea: add resize-none class with autoresize prop (ffafd81)
  • unplugin: routing support for inertia (#3845) (d059efc)

🐛 Bug Fixes

  • Accordion: use div instead of h3 for header tag (75e4792), closes #3963
  • Alert/Toast: display actions when using slots (5086363), closes #3950
  • Carousel: move arrows inside container on mobile (d339dcb), closes #3813
  • CommandPalette: consistent alignement with other components (d25265c)
  • CommandPalette: increase input font size to avoid zoom (d227a10)
  • CommandPalette: prevent hover background on disabled items (ba534f1)
  • components: refactor types after @nuxt/module-builder upgrade (#3855) (39c861a)
  • components: respect transform-origin in popper content (#3919) (01d8dc7)
  • ContextMenu/DropdownMenu: handle RTL mode (#3744) (1ae5cc0)
  • ContextMenuContent/DropdownMenuContent: remove unwanted any (#3741) (97274f1)
  • Form: input and output type inference (#3938) (f429498)
  • Form: loses focus on submit (#3796) (8e78eb1)
  • InputMenu/SelectMenu: correctly call onSelect events (#3735) (f25fed5)
  • InputMenu/SelectMenu: prevent disabled items to be selected (8435a0f), closes #3474
  • InputMenu/SelectMenu: remove valueKey string case (9ca213b), closes #3949 #3331
  • InputMenu/SelectMenu: support arbitrary value (#3779) (52a97e2)
  • InputMenu: emit change on multiple item removal (9d2fed1), closes #3756
  • Link: proxy download property (#3879) (47cdc2e)
  • NavigationMenu: add sm:w-auto content slot (abe0859), closes #3788
  • Skeleton: improve accessibility (#3613) (3484832)
  • Stepper: ui prop override on icon and content slots (1d45980), closes #3785
  • Table: improve data reactivity (#3967) (6e27304)
  • Table: pass header colspan to th (#3926) (122e8ac)
  • Tree: simplify reusable template types (#3836) (3deed4c)
  • types: allow color identifiers with dashes (#3896) (e5a1e26)
  • types: handle ClassValue in ui prop (eea1415), closes #3860
  • types: improve dynamic slots (#3857) (8dd9d08)
  • usePortal: adjust portal target resolution logic (#3954) (db11db6)
  • vite: vitest skipping nuxt imports transformations (#3925) (c31bffa)

🌐 Locales

👋 New Contributors

Full Changelog: v3.0.2...v3.1.0

Contributors

howbizarre, menthol, and 20 other contributors
Assets 2
Loading