CoreUI for Vue v5.8.0 - Chip Components

We are excited to announce the release of CoreUI for Vue v5.8.0. This update introduces two powerful new components - Chip and Chip Input - bringing modern, compact UI elements for tags, labels, and multi-value inputs to your Vue.js applications.

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 for Vue v5.8.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.8.0.
3. Find the @coreui/coreui entry under dependencies and update the version number to ^5.6.1 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 introduces two powerful new components for modern UIs:

Chip Component

• CChip: New component for displaying compact, interactive elements representing tags, contacts, or selected items. Chips are perfect for displaying dismissible tags, user selections, filter criteria, and compact information displays.

Key Features:

• Multiple color variants (primary, secondary, success, danger, warning, info)
• Dismissible functionality with close button
• Avatar support for user chips
• Icon integration
• Custom styling options
• Small and large size variants

Chip Input Component

• CChipInput: Enhanced multi-value input component allowing users to enter multiple values as chips. Perfect for tag input, email recipients, keywords, and any multi-value data entry scenario.

Key Features:

• Add chips by pressing Enter or comma
• Remove chips with backspace or close button
• Paste multiple values at once
• Custom delimiters
• Validation support
• Disabled state
• Placeholder text

Component Usage Examples

Basic Chip Usage

Display tags, categories, or labels:

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

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

Chip with Avatar

Display user selections or contacts:

<template>
  <CChip>
    <CAvatar src="/avatar.jpg" size="sm" />
    John Doe
  </CChip>
</template>

Chip Input for Tags

Multi-value input for tags or keywords:

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

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

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

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

Email Recipients Input

Perfect for email compose interfaces:

<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>

Use Cases

Chip Component Applications

• Tag Display: Show product tags, content categories, labels
• Filter Pills: Display active filters in search interfaces
• User Selection: Show selected users, teams, or groups
• Status Indicators: Compact status or badge display
• Dismissible Notifications: Removable notification chips
• Contact Lists: Display contacts with avatars

Chip Input Applications

• Tag Management: Product tagging, content categorization
• Email Interfaces: To/CC/BCC recipient fields
• Keyword Entry: SEO keywords, search terms
• Multi-Select Alternative: Lightweight multi-value input
• Label Assignment: Assign multiple labels to items
• Filter Building: Build complex filter queries

Styling and Customization

Color Variants

Chips support all standard CoreUI color variants:

<CChip color="primary">Primary</CChip>
<CChip color="secondary">Secondary</CChip>
<CChip color="success">Success</CChip>
<CChip color="danger">Danger</CChip>
<CChip color="warning">Warning</CChip>
<CChip color="info">Info</CChip>
<CChip color="light">Light</CChip>
<CChip color="dark">Dark</CChip>

Size Variants

<CChip size="sm">Small Chip</CChip>
<CChip>Default Chip</CChip>
<CChip size="lg">Large Chip</CChip>

Vue 3 Compatibility

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

• Composition API: Full support with <script setup>
• TypeScript: Comprehensive type definitions
• v-model: Two-way binding for CChipInput
• Emits: Typed event emitters
• Slots: Named slots for customization
• Reactivity: Optimized for Vue 3’s reactivity system

TypeScript Support

Full TypeScript definitions for all new 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 CChipInputEmits {
  (e: 'update:modelValue', value: string[]): void
  (e: 'add', value: string): void
  (e: 'remove', value: string): void
}

Accessibility

Both 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
• Dismissible Chips: Accessible close buttons
• WCAG Compliance: Meets WCAG 2.1 guidelines

Performance

Optimized for performance:

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

Migration Notes

This is a feature release with full backward compatibility. No breaking changes were introduced:

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

Why Update?

Updating to CoreUI for Vue v5.8.0 provides:

• New Components: Chip and Chip Input for modern UIs
• Enhanced UX: Better tag and multi-value input experiences
• TypeScript: Full type definitions
• Accessibility: WCAG compliant components
• Vue 3 Optimized: Latest Vue 3 compatibility
• Developer Experience: Improved component API
• Documentation: Comprehensive guides and examples

Getting Started

1. Update to CoreUI for Vue v5.8.0
2. Explore the Chip component documentation
3. Try the Chip Input component
4. Check out live examples and interactive demos

Additional Resources

• CoreUI for Vue Documentation
• Chip Component Guide
• Chip Input Guide
• Getting Started
• GitHub Repository

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