CoreUI PRO for Vue v5.17.1 - Dropdown & PRO Features

We are pleased to announce the release of CoreUI PRO for Vue v5.17.1. This update includes enhanced Dropdown functionality with custom positioning and improved accessibility, plus all exclusive PRO components for building sophisticated enterprise Vue.js applications with Vue 3 compatibility.

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.

Angular

Bootstrap

React.js

Vue.js

How to Update

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

1. Open your project’s package.json.
2. Locate the @coreui/vue-pro entry under dependencies and update the version number to 5.17.1.
3. Find the @coreui/coreui-pro entry under dependencies and update the version number to ^5.17.0 or later.
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

This release brings powerful enhancements to core components:

• CDropdown - Custom Positioning: Added reference prop for custom positioning targets, enabling advanced dropdown positioning relative to specific elements. Perfect for complex layouts and custom trigger scenarios.

• CDropdown - Focus Trap with Teleport: Introduced focus trap functionality when using teleport, improving keyboard navigation and accessibility when dropdown content is rendered outside normal DOM hierarchy.

• CDropdownToggle - Accessibility: Added splitLabel prop for customizable screen reader text in split button dropdowns, ensuring WCAG compliance and better assistive technology support.

Bug Fixes

• CNavItem: Fixed class property enforcement issue, ensuring consistent styling behavior
• CDropdown: Resolved scrollbar interaction preventing dropdown closure

PRO-Exclusive Components

CoreUI PRO for Vue includes powerful enterprise components not available in the free version:

• Calendar: Advanced calendar with custom cell rendering, events, and quarter selection
• Date Picker: Feature-rich date picker with range selection and locale support
• Date Range Picker: Specialized component for selecting date ranges
• Time Picker: Intuitive time selection with 12/24 hour formats
• Multi Select: Advanced dropdown with multi-value selection and search
• Smart Table: Data table with built-in sorting, filtering, pagination
• Smart Pagination: Advanced pagination with customizable options
• Loading Button: Button with integrated loading state
• Range Slider: Interactive slider for value ranges
• Rating: Star rating with half-star support
• Password Input: Password field with show/hide toggle
• One Time Password Input: OTP/PIN input component
• Stepper: Multi-step form wizard component

Dropdown Enhancements

Custom Positioning

<template>
  <div>
    <CButton ref="customTrigger">Trigger</CButton>
    <CDropdown :reference="customTrigger">
      <CDropdownMenu>
        <CDropdownItem>Action</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  </div>
</template>

Improved Accessibility

<CDropdownToggle split splitLabel="Open user menu">
  User Actions
</CDropdownToggle>

Use Cases

Custom Reference Positioning

• Complex Layouts: Position dropdowns relative to non-standard triggers
• Dynamic UIs: Attach dropdowns to dynamically positioned elements
• Custom Controls: Create unique dropdown interactions
• Tooltip-Style Menus: Position menus near specific UI elements

PRO Component Applications

• Enterprise Dashboards: Smart Tables with advanced data management
• Booking Systems: Calendar with custom cell rendering and events
• Financial Apps: Date Range Picker for reporting periods
• User Management: Multi Select for role and permission assignment
• Forms: Stepper for multi-step data collection

Vue 3 Compatibility

CoreUI PRO for Vue v5.17.1 is fully compatible with Vue 3, including:

• Composition API: Full support for modern Vue patterns
• TypeScript: Comprehensive type definitions
• Teleport: Proper focus management with teleported content
• Suspense: Support for async components
• Reactivity: Optimized for Vue 3’s reactivity system

Dependency Updates

Key dependency updates for improved compatibility:

• vue to: ^3.5.21 or later
• @coreui/coreui-pro to: ^5.17.0 or later
• Enhanced TypeScript support
• Improved development tooling

TypeScript Support

Full TypeScript definitions for all components:

interface CDropdownProps {
  reference?: HTMLElement | ComponentPublicInstance
  teleport?: boolean | string
  // ... more props
}

interface CDropdownToggleProps {
  split?: boolean
  splitLabel?: string
  // ... more props
}

Performance and Compatibility

Fully compatible with:

• Vue: v3.0.0 and newer
• TypeScript: v4.5.0 and newer
• Modern Browsers: Chrome, Firefox, Safari, Edge
• Mobile Browsers: iOS Safari, Chrome Mobile

Optimizations:

• Efficient rendering with Vue 3 reactivity
• Optimized event handling
• Minimal bundle size impact
• Support for large datasets

Migration Notes

This is primarily a feature and bug-fix release:

• CNavItem class Property: Now properly enforced as required
• Dropdown Behavior: Improved scrollbar interaction is backward compatible
• New Features: Opt-in via new props, no breaking changes

Why Update?

Updating to CoreUI PRO for Vue v5.17.1 provides:

• Enhanced Flexibility: Custom dropdown positioning
• Better Accessibility: Improved screen reader support
• Bug Fixes: Resolved dropdown and navigation issues
• PRO Components: Exclusive enterprise components
• Vue 3 Optimized: Latest Vue 3 compatibility
• TypeScript: Enhanced type definitions
• Commercial License: Suitable for commercial projects
• Priority Support: Dedicated support for PRO customers

Getting Started

1. Update to CoreUI PRO for Vue v5.17.1
2. Explore the Dropdown documentation
3. Check out PRO component demos
4. Try interactive examples in the documentation

Enterprise Features

CoreUI PRO for Vue provides additional value:

• Advanced Components: Exclusive PRO components
• Priority Support: Dedicated support team
• Regular Updates: Frequent updates with new features
• Commercial License: Enterprise-ready licensing
• Extended Documentation: Comprehensive guides and examples

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