v2.11.0

Read our updated documentation on https://ui.nuxt.com.

✨ Highlights

🛠️ Components

• New Breadcrumb component

• New Chip component

This component behave exactly like the chip prop on the Avatar and is meant to replace it in the next major version. The advantage of having a specific component for this is to be able to use on any component:

⌨️ App Config types

We've introduced prop types with validators in https://github.com/nuxt/ui/releases/tag/v2.9.0 to enable autocomplete. Initially, this feature was compatible only with the default configuration of @nuxt/ui. Now, autocomplete functionality extends to custom values specified in your app.config.ts. As an illustration, consider the following definition in app.config.ts:

export default defineAppConfig({
  ui: {
    button: {
      color: {
        custom: {
          subtle: '...'
        }
      }
    }
  }
})

Autocomplete will now function for the color and variant props of the Button and include your custom values:

🪄 Dynamic Icons

The Icon component now has a dynamic prop that will use nuxt-icon instead of the default behaviour with egoist/tailwindcss-icons.

This can be quite useful when using dynamic class names or for icons coming from a database for example.

This behaviour can be changed globally in your app.config.ts through ui.icons.dynamic:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'slate',
    icons: {
      dynamic: true
    }
  }
})

🎨 Custom Icons

The ui.icons option in your nuxt.config.ts can now be an object to completely override the @egoist/tailwindcss-icons plugin, this can be quite useful if you want to use a custom icon collection for example:

import { getIconCollections } from '@egoist/tailwindcss-icons'

export default defineNuxtConfig({
  ui: {
    icons: {
      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
      extraProperties: {
        '-webkit-mask-size': 'contain',
        '-webkit-mask-position': 'center'
      },
      collections: {
        foo: {
          icons: {
            'arrow-left': {
              // svg body
              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
              // svg width and height, optional
              width: 24,
              height: 24
            }
          }
        },
        ...getIconCollections(['heroicons', 'simple-icons'])
      }
    }
  }
})

🛟 Tailwind CSS bundle

There is an open issue #877 to reduce the final bundle size as Tailwind CSS generate classes for all the components at the moment. As a first step to solve this, we've splitted the config of each component into separate files in #930 so you can have at least the option to exclude files manually in your tailwind.config.ts:

import { resolve } from 'pathe'
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: {
    files: [
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/data/table.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/modal.mjs')
    ]
  }
}

🚀 Features

• Breadcrumb: new component (#506) (a35bfc7)
• Checkbox: config label, required and help size (a1b38c4)
• Chip: new component (#886) (d4f1b5e)
• FormGroup: add eager validation (#992) (d39e2de)
• Icon: switch to nuxt-icon with dynamic prop or app config (#862) (c601fc6)
• module: allow options override of @egoist/tailwindcss-icons plugin (#1013) (ec58948)
• Notification: customize default timeout (#1003) (83c3be7)
• Popover: ability to add overlay (#1014) (06d4510)
• SelectMenu: allows to clear search query on close (#968) (11ccbbb)
• Textarea: add default slot for complex usages (55697e6), closes #971
• Toggle: add size prop (#950) (3c71bf3)
• types: support custom values from app.config.ts (#863) (7339324)

🐛 Bug Fixes

• Alert: improve config options (91511b9), closes #760
• Alert: prevent gap when no close button or action (9a1a1b8), closes #831
• ButtonGroup: handle components with children (#999) (f4be95d)
• CommandPalette: activate first option after async search (#981) (a975939)
• defineShortcuts: support minus - key (#962) (de38afd)
• Dropdown: pass event to click function (60fa2be)
• Dropdown: use NuxtLink with custom prop to close on select (f323379), closes #899
• FormGroup: hydration mismatch on inputId (#942) (a3046aa)
• FormGroup: remove inputId if the input is a fieldset (#914) (e81d5cf)
• Input/Textarea: add v-model modifiers (#856) (68f6956)
• Link: handle active state when to prop is not provided (6cc77a3), closes #988
• Link: reactivity issue with active prop (15a40f5), closes nuxt/nuxt.com#1432
• module: boolean types and bump nuxt to 3.8.2 (#1006) (ca62ce1)
• module: use correct alias for #ui-colors (#913) (c84438f)
• Notification: improve config options (7cb987d)
• Notification: prevent gap when no close button or action (ded6a7f)
• Notifications: teleport to body (#909) (8451f4d)
• Progress: percentage calculation (#939) (c55871b)
• Radio: prevent help text from inlining with label (#894) (a2d70f0)
• SelectMenu: fixes non-strings and nested searchable attributes (#967) (37fdf22)

👋 New Contributors

• @jrutila made their first contribution in #892
• @maximepvrt made their first contribution in #929
• @flozdra made their first contribution in #981
• @pacmandoh made their first contribution in #998
• @ivanmaxlogiudice made their first contribution in #1003
• @huynl-96 made their first contribution in #860
• @ineshbose made their first contribution in #930

Full Changelog: v2.10.0...v2.11.0