CoreUI PRO for Vue v5.18.0 - Chip Components & PRO Features

Friday, March 27, 2026

We are excited to announce the release of CoreUI PRO for Vue v5.18.0. This update introduces powerful new Chip and Chip Input components, 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.

How to Update

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

Open your project’s package.json.
Locate the @coreui/vue-pro entry under dependencies and update the version number to 5.18.0.
Find the @coreui/coreui-pro entry under dependencies and update the version number to ^5.24.2 or later.
Save your changes to the package.json file.
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

New Components

This release introduces two powerful new components:

Chip Component

CChip: Display compact, interactive elements representing tags, contacts, or selected items with dismissible functionality, avatar support, and custom styling options.

Chip Input Component

CChipInput: Multi-value input component for entering multiple values as chips, perfect for tags, email recipients, keywords, and any multi-value data entry scenario.

Component Usage Examples

Basic Chip Usage

<template>
  <div>
    <CChip color="primary">Vue.js</CChip>
    <CChip color="success">TypeScript</CChip>
    <CChip color="info" dismissible @dismiss="handleDismiss">
      CoreUI PRO
    </CChip>
  </div>
</template>

<script setup>
const handleDismiss = () => {
  console.log('Chip dismissed')
}
</script>

Chip Input for Tags

<template>
  <CChipInput
    v-model="tags"
    placeholder="Add tags..."
    @update:modelValue="handleTagsChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const tags = ref(['vue', 'typescript', 'coreui-pro'])

const handleTagsChange = (newTags) => {
  console.log('Tags updated:', newTags)
}
</script>

Email Recipients

<template>
  <CFormLabel>To:</CFormLabel>
  <CChipInput
    v-model="recipients"
    placeholder="Enter email addresses..."
    :delimiter="[',', ';', ' ']"
  />
</template>

<script setup>
import { ref } from 'vue'

const recipients = ref([
  '[email protected]',
  '[email protected]'
])
</script>

PRO-Exclusive Components

CoreUI PRO for Vue includes all enterprise components:

Advanced Components

Calendar: Advanced calendar with custom cell rendering, events, and quarter selection for financial reporting
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, and pagination
Smart Pagination: Advanced pagination with customizable options
Loading Button: Button with integrated loading state
Chip: Compact information display with dismissible functionality
Chip Input: Multi-value chip input for tags
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

Use Cases

Chip Components

Tag Management: Product tags, content categories, labels
Contact Lists: Email recipients, user selections with avatars
Filter Display: Active filters in search interfaces
Multi-Value Input: Keywords, labels, attributes
Status Indicators: Compact status or badge display

Enterprise Applications

Admin Dashboards: Smart Tables for data management
Booking Systems: Calendar with custom events
Financial Apps: Date Range Picker for reporting periods
User Management: Multi Select for roles and permissions
Complex Forms: Stepper for multi-step data collection

Vue 3 Compatibility

CoreUI PRO for Vue v5.18.0 is fully compatible with Vue 3:

Composition API: Full support with <script setup>
TypeScript: Comprehensive type definitions
Reactivity: Optimized for Vue 3’s reactivity system
Teleport: Proper focus management with teleported content
Suspense: Support for async components
v-model: Two-way binding for all form components

TypeScript Support

Full TypeScript definitions for all components:

interface CChipProps {
  color?: string
  size?: 'sm' | 'lg'
  dismissible?: boolean
  // ... more props
}

interface CChipInputProps {
  modelValue: string[]
  placeholder?: string
  delimiter?: string | string[]
  disabled?: boolean
  // ... more props
}

interface CCalendarProps {
  selectionMode?: 'single' | 'multiple' | 'range' | 'quarter'
  cellRenderer?: (date: Date) => VNode
  // ... 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
Lazy loading support

Accessibility

All components are built with accessibility in mind:

Keyboard Navigation: Full keyboard support
Screen Reader Support: Proper ARIA labels and roles
Focus Management: Clear focus indicators
WCAG Compliance: Meets WCAG 2.1 guidelines
High Contrast: Support for high contrast modes

Migration Notes

This is a feature release with full backward compatibility:

All existing components remain unchanged
New Chip components are additive
No code changes required for existing applications
TypeScript definitions are backward compatible
All PRO components fully compatible

Why Update?

Updating to CoreUI PRO for Vue v5.18.0 provides:

New Components: Chip and Chip Input for modern UIs
Enhanced UX: Better tag and multi-value input experiences
PRO Components: Exclusive enterprise-grade components
TypeScript: Full type definitions
Accessibility: WCAG compliant components
Vue 3 Optimized: Latest Vue 3 compatibility
Commercial License: Suitable for commercial projects
Priority Support: Dedicated support for PRO customers

Getting Started

Update to CoreUI PRO for Vue v5.18.0
Explore the Chip component documentation
Try the Chip Input component
Check out all PRO components
Review interactive examples and demos

Enterprise Features

CoreUI PRO for Vue provides additional value:

Advanced Components: Exclusive PRO components not in free version
Priority Support: Dedicated support team with faster response times
Regular Updates: Frequent updates with new features and improvements
Commercial License: Enterprise-ready licensing for commercial projects
Extended Documentation: Comprehensive guides, examples, and tutorials
Direct Access: Direct access to core developers

Additional Resources

Priority Support

As a PRO customer, you have access to:

Dedicated support team
Faster response times
Direct access to core developers
Priority bug fixes
Feature requests consideration

Visit CoreUI PRO Support for assistance.

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