CoreUI for Vue v5.9.0 - ChipSet, NavGroup Redesign & Major Improvements

We are excited to announce the release of CoreUI for Vue v5.9.0. This is a major feature release introducing the new Chip Set component with filter chips, the Search Button component, Sidebar Nav tree variant, a redesigned CNavGroup with controlled visibility, carousel touch swipe support, and many important bug fixes.

---

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

---

How to Update

To update your project to CoreUI for Vue v5.9.0, follow these steps:

1. Open your project’s package.json.
2. Locate the @coreui/vue entry under dependencies and update the version number to 5.9.0.
3. Find the @coreui/coreui entry under dependencies and update the version number to ^5.8.0.
4. Save your changes to the package.json file.
5. In your project’s root directory, run the update command appropriate for your package manager:
   • For npm users, execute npm install.
   • For yarn users, execute yarn install.
   • For pnpm users, execute pnpm install.

What’s New

Features

• CChipSet: New component for grouping chips with selection coordination (single/multiple via v-model), roving focus, data-driven chips prop, v-model:chips for self-syncing removal, and v-model:selected for selection state. Supports filter chips with a leading check icon.

• CChip - Filter Mode: Added filter prop that implies selectable and shows a check icon while selected. Disabled chips no longer render a remove button.

• CChipInput Improvements: Now built on the shared useChipSet composable, adds selectionMode prop, always renders the hidden form input, supports initializing from slot content, and mirrors arrow-key navigation in RTL.

• CSearchButton: New keyboard-shortcut-aware search trigger button displaying platform-appropriate hints (⌘K / Ctrl+K).

• CSidebarNav - Tree Variant: Added tree variant and compact prop for hierarchical navigation structures.

• CNavGroup - Controlled Visibility: Redesigned with v-model:visible for controlled mode, context-based accordion coordination via provide/inject (replaces vnode cloning), aria-expanded on the toggler, and auto-opening the active route.

• CCarousel - Touch Swipe: Added touch swipe support using a ported Swipe helper (pointer events with touch fallback, 40px threshold), with RTL-aware direction mapping and slide/slid events.

• CDropdown, CPopover, CTooltip - popperConfig: New popperConfig prop for custom Popper.js positioning options.

Bug Fixes

• CDropdown: Default variant corrected to 'dropdown' to match other frameworks.
• CFormRange: Renamed steps prop to step so the interval actually applies to the range input.
• CChip: Default selected prop to undefined to fix the controlled/uncontrolled distinction.
• CToastClose: as prop now accepts a component, not just a string.
• CFocusTrap: Resolves component public instance to $el so focus handling works inside <Transition>.
• CSidebar: Removed leftover console.log in mobile watcher.

Migration Notes

This release includes behavioral changes:

• CDropdown: Default variant changed from 'btn-group' to 'dropdown'. Explicitly pass variant="btn-group" if you relied on the previous default.
• CFormRange: The steps prop has been renamed to step. Update your templates accordingly.
• CNavGroup: Now uses provide/inject coordination instead of vnode cloning. The public API is backward-compatible, but if you used internal implementation details, review the new context-based approach.
• CCarousel: Touch swipe is enabled by default via the touch prop. Set :touch="false" to disable.

After upgrading:

1. Install updated dependencies.
2. Run your test suite and verify the build.
3. Check components using CDropdown, CNavGroup, CFormRange, CCarousel for changed behavior.

---

For a comprehensive overview of all changes, enhancements, and updates introduced in this release, please refer to the full changelog on GitHub.