@nuxt/ui

Nuxt UI

Nuxt UI provides everything related to UI when building Nuxt applications: components, icons, colors, dark mode and also keyboard shortcuts.

Is has been developed by NuxtLabs for Volta, Nuxt Studio and the Nuxt community.

Features

• Built with Headless UI and Tailwind CSS
• HMR support through Nuxt App Config
• Dark mode support
• Support for LTR and RTL languages
• Keyboard shortcuts
• Bundled icons
• Fully typed

Read more on ui.nuxt.com

Installation

# Using npm
npm install @nuxt/ui

# Using yarn
yarn add @nuxt/ui

# Using pnpm
pnpm add @nuxt/ui

Then, register the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui'
  ]
})

If you want latest updates, please use @nuxt/ui-edge in your package.json:

{
  "devDependencies": {
    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
  }
}

Documentation

Visit https://ui.nuxt.com to explore the documentation.

Credits

• nuxt/nuxt
• nuxt-modules/color-mode
• nuxt-modules/tailwindcss
• tailwindlabs/tailwindcss
• tailwindlabs/headlessui
• vueuse/vueuse
• egoist/tailwindcss-icons

License

Licensed under the MIT license.

Changelog

2.8.0 (2023-09-07)

⚠ BREAKING CHANGES

• module: use tailwind-merge for class merging (#509)

Features

• Avatar: add icon prop as fallback (df3b202)
• Avatar: handle icon default from app.config.ts (55daed0)
• ButtonGroup: add orientation prop (#603) (b3bc6e2)
• Form: add valibot supprt (#615) (ab5153a)
• Form: improve form control and input validation trigger (#487) (6d7973f)
• Modal: add fullscreen prop (#523) (7e2bebd)
• module: add DEFAULT shade to primary color (#493) (c6056ed)
• module: use tailwind-merge for class merging (#509) (8880bdc)
• Table: support nested keys in columns (#503) (858886a)
• Tabs: control selected index (#490) (aaf09ad)

Bug Fixes

• Alert: fix wrong type of actions (#507) (b243e8c)
• AvatarGroup: add justify-end to wrapper to prevent right align (e578b0d)
• AvatarGroup: pass default size to max avatar (e49c673)
• AvatarGroup: use ui.wrapper as inheritAttrs is not false (eb609b1)
• Badge: allow label as number (7c157ce)
• Button: add missing prop types (#508) (a8a1c15)
• ButtonGroup: switch back to ui prop (d4e3ab6)
• Form: fix wrong type of validate (#496) (3d6839d)
• FormGroup: size were invalid since default has been removed (7008df0)
• FormGroup: add missing ref import from vue (39042b3)
• Form: use safeParseAsync for zod (#497) (8b19b18)
• module: missing useHead import (0f252d0)
• module: missing useNuxtApp import (888effe)
• Popover: handle hover mode with padding like dropdown (dc951ff)
• Radio: put back id for label selection (9b3a22e)
• SelectMenu: invalid gap values (998314e)
• Table: empty state is displayed if null (#517) (44ba758)
• Table: missing component imports (#608) (d936316)
• Tabs: recompute marker position when v-model changes (#524) (fdce429)
• Tooltip: hide on touch devices (#580) (f1ed007)
• use head instance from plugin (791804b)