CoreUI PRO for Vue v5.17.0

Thursday, October 2, 2025

We are thrilled to announce the release of CoreUI PRO for Vue v5.17.0 — a significant update that introduces the brand new COneTimePassword component for secure authentication workflows, enhanced autocomplete functionality, and comprehensive dependency updates for better performance and security.

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

Open your package.json file.
Update the @coreui/vue-pro dependency to 5.17.0.
Update the @coreui/coreui-pro dependency to 5.21.0.
Update the @coreui/vue dependency to 5.7.0.
Save your changes.
Run the appropriate command for your package manager:
- npm: npm install
- yarn: yarn install

🚀 What’s New

✨ New Component

COneTimePassword - Initial Release

Introducing the powerful COneTimePassword component designed for secure authentication and verification workflows:

Multi-Format Support: Handles numeric, alphanumeric, and custom character patterns
Flexible Configuration: Configurable input field count (2-12 fields)
Advanced Validation: Built-in validation with custom error handling
Vue 3 Optimized: Full integration with Vue 3 Composition API and reactivity system
Accessibility First: Comprehensive ARIA support and keyboard navigation
Auto-Focus Management: Intelligent focus progression and backspace handling
Paste Support: Smart paste functionality with automatic field distribution
Customizable Styling: Full theming support with size variants and custom separators

<template>
  <!-- Basic OTP implementation -->
  <COneTimePassword
    :length="6"
    @complete="handleOTPComplete"
  />

  <!-- Advanced configuration with custom styling -->
  <COneTimePassword
    :length="4"
    variant="numeric"
    size="lg"
    separator="-"
    placeholder="•"
    auto-focus
    :invalid="hasValidationError"
    feedback="Invalid code. Please try again."
    @complete="handleOTPSubmission"
    @change="handleOTPChange"
  />

  <!-- Alphanumeric OTP with custom styling -->
  <COneTimePassword
    :length="8"
    variant="alphanumeric"
    class="custom-otp"
    :style="{ gap: '12px' }"
  />
</template>

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

const hasValidationError = ref(false)

const handleOTPComplete = (value) => {
  console.log('OTP entered:', value)
  // Handle OTP verification
}

const handleOTPSubmission = async (value) => {
  try {
    await verifyOTP(value)
    hasValidationError.value = false
  } catch (error) {
    hasValidationError.value = true
  }
}
</script>

COneTimePassword Features

Variant Support:
- numeric - Numbers only (0-9)
- alphanumeric - Letters and numbers
- alpha - Letters only
- custom - Custom character pattern with regex support
Size Variants: sm, lg, and default sizing
Visual Customization: Separators, placeholders, and custom styling options
Event Handling: @change, @complete, @focus, @blur
Validation States: Invalid state with custom feedback messages
Vue 3 Integration: Full Composition API support with reactive props

🛠 Component Improvements

CAutocomplete

Indicator Rendering Fix: Resolved issue where indicator was always rendered regardless of prop value
- Now only renders indicator when indicator prop is explicitly set to true
- Improved visual consistency and component performance
- Better control over component appearance and behavior

<!-- Indicator only shows when explicitly enabled -->
<CAutocomplete
  :indicator="true"
  :options="searchOptions"
  @selection-change="handleSelection"
/>

<!-- No indicator rendered -->
<CAutocomplete
  :options="searchOptions"
  @selection-change="handleSelection"
/>

🎯 Vue 3 Enhancements

Composition API Integration

Reactive Props: Full reactivity support for all new component props
Composable Patterns: Enhanced integration with Vue 3 composables
TypeScript Support: Comprehensive type definitions for better developer experience
SSR Compatibility: Improved server-side rendering support

Performance Optimizations

Bundle Size: Optimized tree-shaking for smaller bundle sizes
Runtime Performance: Enhanced component initialization and lifecycle management
Memory Management: Improved cleanup and garbage collection

📦 Dependency Updates

This release includes significant dependency updates for enhanced performance, security, and compatibility:

Core Dependencies

Updated @coreui/coreui-pro from ^5.20.0 to ^5.21.0
Updated @coreui/vue from ^5.6.0 to ^5.7.0

Documentation Tools

Updated @docsearch/css from ^4.0.1 to ^4.1.0
Updated @docsearch/js from ^4.0.1 to ^4.1.0

Development Tools

Updated cross-env from ^10.0.0 to ^10.1.0
Updated eslint from ^9.35.0 to ^9.36.0
Updated eslint-plugin-vue from ^10.4.0 to ^10.5.0
Updated lerna from ^8.2.4 to ^9.0.0 (Major update)
Updated rollup from ^4.50.2 to ^4.52.3
Updated sass from ^1.92.1 to ^1.93.2
Updated ts-jest from ^29.4.2 to ^29.4.4
Updated typescript from ^5.9.2 to ^5.9.3
Updated typescript-eslint from ^8.44.0 to ^8.45.0
Updated vue from ^3.5.21 to ^3.5.22

🎯 Enhanced User Experience

COneTimePassword Security Features

The new OTP component provides enterprise-grade security features:

Input Validation: Configurable character restrictions and length validation
Auto-Clear on Error: Optional automatic clearing on validation failure
Secure Input Handling: Prevents common input vulnerabilities and timing attacks
Rate Limiting Support: Compatible with backend rate limiting strategies
Accessibility Compliance: Full WCAG 2.1 AA compliance for authentication workflows

Authentication Workflow Integration

Perfect for various authentication scenarios:

Two-Factor Authentication (2FA): SMS and email verification codes
Multi-Factor Authentication (MFA): Additional security layer integration
Password Reset: Secure verification code entry
Account Verification: Email and phone number verification
Transaction Confirmation: Secure transaction authorization codes

Vue 3 Developer Experience

Enhanced development experience with:

Composition API Support: Seamless integration with modern Vue patterns
TypeScript Integration: Full type definitions for all props and events
Reactive Validation: Real-time validation with Vue’s reactivity system
Form Library Compatibility: Works with popular Vue form libraries

💡 Migration Notes

New Component Usage

The COneTimePassword component is ready to use immediately:

<template>
  <!-- Basic implementation -->
  <div class="login-form">
    <COneTimePassword
      :length="6"
      @complete="handleOTPComplete"
    />
  </div>

  <!-- Advanced implementation with reactive validation -->
  <div class="secure-form">
    <COneTimePassword
      :length="4"
      variant="numeric"
      size="lg"
      :invalid="!isValidOTP"
      :feedback="validationMessage"
      @complete="verifyOTP"
      @change="resetValidation"
    />
  </div>
</template>

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

const isValidOTP = ref(true)
const currentOTP = ref('')

const validationMessage = computed(() =>
  !isValidOTP.value ? "Invalid code. Please try again." : ""
)

const handleOTPComplete = async (value) => {
  currentOTP.value = value
  // Handle OTP submission
}

const verifyOTP = async (value) => {
  try {
    await authenticateUser(value)
    isValidOTP.value = true
  } catch (error) {
    isValidOTP.value = false
  }
}

const resetValidation = () => {
  isValidOTP.value = true
}
</script>

CAutocomplete Update

For existing CAutocomplete implementations:

<!-- Before v5.17.0 - indicator always rendered -->
<CAutocomplete :options="options" />

<!-- After v5.17.0 - explicit indicator control -->
<CAutocomplete
  :options="options"
  :indicator="true"  <!-- Add this to show indicator -->
/>

No Breaking Changes

All changes are backward compatible except for the CAutocomplete indicator behavior, which is a visual improvement that may require explicit indicator enabling if you were relying on the always-visible indicator.

📖 Technical Details

COneTimePassword Implementation

The component is built with modern Vue 3 patterns:

Composition API: Uses <script setup> and composables for optimal performance
Reactivity System: Leverages Vue 3’s reactivity for efficient updates
Template Refs: Efficient DOM manipulation with template references
Event System: Custom events with proper payload typing
Lifecycle Hooks: Proper component lifecycle management

Security Considerations

The OTP component includes several security best practices:

Input Sanitization: Automatic filtering of invalid characters
Clipboard Security: Secure paste handling with validation
Focus Management: Prevents focus-based timing attacks
Memory Protection: Secure handling of sensitive input data
XSS Prevention: Proper input escaping and sanitization

Accessibility Features

Comprehensive accessibility support includes:

Screen Reader Support: Full ARIA label and description support
Keyboard Navigation: Arrow keys, Tab, Backspace, and Delete handling
Focus Management: Clear visual focus indication and logical tab order
High Contrast Support: Compatible with high contrast display modes
Voice Control: Works with voice control and dictation software

Vue 3 Specific Features

Enhanced Vue 3 integration offers:

Composition API: Full support for <script setup> syntax
Reactive Props: All props are reactive and work with ref and reactive
Template Refs: Efficient access to component instances
Teleport Support: Compatible with Vue 3 Teleport for modal rendering
SSR Ready: Full server-side rendering compatibility

Upgrade to CoreUI PRO for Vue v5.17.0 today to access the powerful new COneTimePassword component and enhanced autocomplete functionality. This release demonstrates our commitment to providing secure, accessible, and modern Vue 3 components.

📚 Learn More

For detailed documentation and implementation examples, visit: