@nuxt/ui 2.11.0 on Node.js NPM

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

@nuxt/ui 2.11.0 v2.11.0 on Node.js NPM