CoreUI for Vue v5.6.0

We are excited to announce the release of CoreUI for Vue v5.6.0. This version introduces a new accessibility component, component enhancements, important bug fixes, and comprehensive dependency updates to keep your Vue applications modern and reliable.

---

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 upgrade to CoreUI for Vue v5.6.0, follow these steps:

1. Open your project’s package.json.
2. Update the version of @coreui/vue to 5.6.0.
3. Update the version of @coreui/coreui to 5.4.3.
4. Save the file and install the updated dependencies:
   • npm: npm install
   • yarn: yarn install

🚀 What’s New

✨ New Components

• CFocusTrap: Brand new accessibility component for focus management
  • Essential for modal dialogs, dropdown menus, and other interactive overlays
  • Traps keyboard focus within a designated area for better accessibility
  • Follows WCAG 2.1 guidelines for keyboard navigation
  • Lightweight implementation with Vue 3 Composition API
  • Supports escape key handling and focus restoration

🛠 Enhancements & Fixes

• CButton: Fixed variant styling when undefined

  • Resolved styling issues when button variant is not explicitly set
  • Improved fallback behavior for default button appearance
  • Thanks to @jrd-lewis for their first contribution to the project

• CModal: Enhanced handling of click outside and key events

  • Improved event handling for better user experience
  • More reliable modal dismissal behavior
  • Better keyboard interaction support

• CDropdown: Improved arrow keys handling

  • Enhanced keyboard navigation with smoother arrow key interactions
  • Better focus management during menu navigation
  • Improved accessibility for screen readers

🔧 Technical Improvements

• Component Documentation: Updated available components list
• Event Handling: Refined component interactions across multiple components
• Vue 3 Integration: Enhanced compatibility with latest Vue 3 features

📦 Dependency Updates

This release includes important dependency updates to keep the CoreUI Vue stack secure and performant:

Core Dependencies

• Updated @coreui/coreui from ^5.4.0 to ^5.4.3
• Updated vue from ^3.5.16 to ^3.5.20

Development Dependencies

• Updated various ESLint packages for improved linting capabilities
• Updated build tools and testing dependencies
• Updated TypeScript and related tooling for better development experience
• Updated Sass and styling dependencies

Technical Details

CFocusTrap Component

The new CFocusTrap component provides essential accessibility functionality by:

• Capturing focus within a specific Vue component or DOM region
• Cycling focus through focusable elements using Tab/Shift+Tab
• Returning focus to the trigger element when the trap is disabled
• Supporting custom focus handling and escape key interactions
• Integrating seamlessly with Vue 3’s reactivity system

CButton Improvements

The button component fixes address:

• Undefined variant handling with proper fallbacks
• Consistent styling behavior across all use cases
• Better integration with custom CSS variables
• Improved theme compatibility

Enhanced Modal and Dropdown Interactions

Component improvements include:

• More reliable event propagation handling
• Better keyboard event management
• Improved focus restoration after component interactions
• Enhanced accessibility for assistive technologies

---

For a complete list of changes, enhancements, and resolved issues, please visit the full changelog on GitHub.