@nuxt/ui 2.13.0 on Node.js NPM

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

✨ Highlights

Carousel component

The Carousel component allows you to display images or content in a scrollable area and comes with drag to scroll support, navigation buttons, indicators, etc.

HorizontalNavigation component

Much like the VerticalNavigation, the HorizontalNavigation component comes in handy when you need to display a list of horizontal links.

🎨 Design consistency

We've updated the Breadcrumb, CommandPalette, Dropdown, InputMenu, SelectMenu and VerticalNavigation components config to be consistent with the Button default sm size.

If you take a look at this example with many components, you can see that everything is now perfectly aligned and has the same size:

<template>
  <UContainer class="min-h-screen flex items-center">
    <div class="w-80 space-y-2">
      <UCommandPalette :groups="[{ key: 'links', commands: links }]" :searchable="false" class="-mx-2" />
      <UVerticalNavigation :links="links" />
      <UHorizontalNavigation :links="links" />
      <UInput :icon="selected.icon" :options="links" :placeholder="selected.label" />
      <UInputMenu v-model="selected" :icon="selected.icon" :options="links" />
      <USelect :icon="selected.icon" :options="links" :placeholder="selected.label" />
      <USelectMenu v-model="selected" :icon="selected.icon" :options="links" />
      <UDropdown :items="[links]" :popper="{ placement: 'bottom-start' }" class="w-full">
        <UButton color="white" :icon="selected.icon" :label="selected.label" class="w-full" />
      </UDropdown>
      <UBreadcrumb :links="links" class="ml-2.5" />
      <UAccordion :items="links" color="gray" variant="ghost" />
    </div>
  </UContainer>
</template>

<script setup>
const links = [{
  label: 'Installation',
  icon: 'i-heroicons-home',
  to: '/getting-started/installation'
}, {
  label: 'Vertical Navigation',
  icon: 'i-heroicons-chart-bar',
  to: '/navigation/vertical-navigation'
}, {
  label: 'Command Palette',
  icon: 'i-heroicons-command-line',
  to: '/navigation/command-palette'
}]
const selected = ref(links[0])
</script>

It is not shown by the screenshot but labels and icons inside the Dropdown / InputMenu / SelectMenu menus now also match.

Here's the list of commits if you want to know exactly what changed:

There are still some improvements left to reflect the size prop on the actual menus as mentioned in #446.

📖 Docs revamp

Since the first release of @nuxt/ui and the launch of @nuxt/ui-pro, more and more components have been added to the docs. There are now at least 90+ components if you combine the two packages.

To ease the navigation between all these components, we removed all the categories like Elements, Forms, Landing, etc. for both @nuxt/ui and @nuxt/ui-pro to group everything under Components. This should remove a lot of clicks to find the component you're looking for.

We also removed the Pro popover in the header to access Nuxt UI Pro, you can now use the Docs and Pro links instead to switch between the two or use the top left dropdown to switch between @nuxt/ui, @nuxt/ui-edge and @nuxt/ui-pro packages.

The Nuxt UI Pro landing page has been merged at the bottom of https://ui.nuxt.com, and new Pricing and Templates pages are now available in the header.

🚀 Features

Carousel: new component (#927) (f37b043)
Dropdown: default delay from config (c4a1c04)
Form: handle multiple paths in validate (#1273) (20ac4b3)
HorizontalNavigation: new component (#1279) (b8007ba)
InputMenu: handle nullable prop when clearing input (5e49fb8)
Modal/Slideover: emit close-prevented event (#1207) (6faf15b)
module: add option to disable global css styles (#1266) (f96eb5e)
Popover: default delay from config (7f5711b)
Tooltip: default delay from config (3400b56)
VerticalNavigation: use Badge component for consistency (3e81eee)

🐛 Bug Fixes

Breadrumb: handle truncate (5d3a962)
Link: propagate active prop to slot as isActive (b76e761)
Select: consistent placeholder with input and textarea (2cb41db), closes #1276
Slideover: handle translate in RTL mode (#1259) (ea58c88)

👋 New Contributors

@Youhan made their first contribution in #1207
@FADL285 made their first contribution in #1259
@Gobler made their first contribution in #927
@CernyMatej made their first contribution in #1266
@AnthonySendra made their first contribution in #1273

Full Changelog: v2.12.3...v2.13.0

@nuxt/ui 2.13.0 v2.13.0 on Node.js NPM