nuxt/ui v4.2.0

on GitHub

✨ Highlights

📅 New InputDate & InputTime components

Two new components are now available to handle date and time inputs: InputDate (#5387) and InputTime (#5302).

<script setup lang="ts">
const date = ref(new CalendarDate(2022, 2, 3))
const time = ref(new Time(12, 30, 0))
</script>

<template>
  <UInputDate v-model="date" />

  <UInputTime v-model="time" />
</template>

🎨 Tailwind CSS prefix

You can now use Tailwind CSS's prefix option (#5341) to prefix all utilities generated by Nuxt UI and avoid conflicts with your own styles or other libraries.

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  }
})

@import "tailwindcss" prefix(tw);
@import "@nuxt/ui";

🚨 Breaking Changes

• components: consistent exposed refs (#5385) (fce2df4)

Exposed refs now consistently return the HTML element directly instead of the component instance. This affects InputMenu, InputNumber, InputTags, Select, and SelectMenu.

<script setup lang="ts">
const inputMenu = useTemplateRef('inputMenu')

- inputMenu.value.inputRef.$el // Component instance
+ inputMenu.value.inputRef // HTML element directly
</script>

• module: properly export composables from module (cb25902)

There was an issue with how composables were exported, you no longer need the .js extension:

<script setup lang="ts">
- import { useToast } from '@nuxt/ui/composables/useToast.js'
+ import { useToast } from '@nuxt/ui/composables/useToast'
// or
+ import { useToast } from '@nuxt/ui/composables'
</script>

🚀 Features

• components: add data-slot attributes (#5447) (dd81d46)
• components: extend native HTML attributes (#5348) (5b17751)
• FileUpload: add preview prop (#5443) (2af82e7)
• InputDate: new component (#5387) (dabc4f8)
• InputTime: new component (#5302) (936253f)
• Modal: add scrollable prop (#5306) (240897e)
• module: add theme.prefix option (#5341) (7fca5d7)
• Table: handle virtualizer estimateSize as function (ebc8568)

🐛 Bug Fixes

• AuthForm: ensure header is shown with leading slot (#5405) (b61127a)
• AuthForm: use password input id for aria-controls (#5312) (55ea9be)
• ChatPrompt: proxy disabled prop (a8f2156), closes #5300
• CheckboxGroup/RadioGroup/Switch: consistent disabled styles (ddd8faf), closes #5391
• ColorModeButton: use css to display color mode icon (#5394) (1d1c638)
• CommandPalette/ContentSearch: improve performances and filtering logic (#5433) (e751b37)
• components: calc virtualizer estimateSize based on item description (56ae8e7)
• components: consistent exposed refs (#5385) (fce2df4)
• components: remove locale / dir props proxy (#5432) (a6efa7a)
• ContentNavigation/NavigationMenu/Tabs: ensure proper badge display (e5c11e6)
• ContentSearchButton/DashboardSearchButton: hide label and trailing with css when collapsed (3e72bf8)
• FileUpload: ensure native validation works with required (#5358) (eb491e1)
• Form: refine nested prop type handling and simplify logic (#5360) (8d5c26f)
• inertia: set serverRendered dynamically to prevent SSR crash (#5396) (c0da1b2)
• Input/InputNumber/Textarea: make modelModifiers generic (#5361) (5c347af)
• InputMenu: prevent change event when selecting create item (418c87b), closes #4664
• Link: partial extend for vue-router and inertia (637ef58)
• Marquee: move keyframes into global css (1e6242e)
• module: detect lazy components when using experimental.componentDetection (5a5ac45)
• module: properly export composables from module (cb25902), closes #5370
• module: scan layers when using experimental.componentDetection (9872740), closes #5389
• NavigationMenu: hide label and trailing with css when collapsed (f004031), closes #4254
• NavigationMenu: proxy modelValue / defaultValue in vertical orientation (cffaaaa), closes #5392
• ProseCallout: add inline-block class to icon (#5317) (fc36f69)
• RadioGroup: update update:modelValue emit type (#5349) (4cb0638)
• Table: apply styles to th based on column meta (#5418) (620defa)
• types: export missing utils types (#5448) (5f0a107)
• vite: write theme templates (#5355) (411ebcc)
• vue: check import.meta.env.SSR to support vite-ssg (#5347) (8f38c04)

🌐 Locales

• locale: add Albanian language (#5461) (3331533)
• locale: add Galician language (#5393) (e93bfd4)

👋 New Contributors

• @GlitchDevX made their first contribution in #5317
• @onmax made their first contribution in #5346
• @rodriciru made their first contribution in #5405
• @NyllRE made their first contribution in #5410
• @usmanibrahim74 made their first contribution in #5418
• @hfersu made their first contribution in #5393
• @rudrokhanpro made their first contribution in #5448
• @y-l-g made their first contribution in #5396
• @Rolanddoda made their first contribution in #5461

Full Changelog: v4.1.0...v4.2.0