Hire Us Get CoreUI PRO all-access →

Migration to v5

Markdown ChatGPT Claude

Track and review changes to the CoreUI for Vue.js components to help you migrate from v4 to v5.

On this page

CoreUI for Vue is the Vue.js version of CoreUI components library, so before read this migration guide, please check also CoreUI 4 to 5 migration guide.

Components

CAlertHeading

  • Breaking Renamed component property to as.

CAvatar

  • Deprecated textColor values: muted, high-emphasis, medium-emphasis, disabled, high-emphasis-inverse, medium-emphasis-inverse, disabled-inverse.
  • New textColor values: primary-emphasis, secondary-emphasis, success-emphasis, danger-emphasis, warning-emphasis, info-emphasis, light-emphasis, body, body-emphasis, body-secondary, body-tertiary, black, black-50, white, white-50.

CBadge

  • Breaking Renamed component property to as.
  • Deprecated textColor values: muted, high-emphasis, medium-emphasis, disabled, high-emphasis-inverse, medium-emphasis-inverse, disabled-inverse.
  • New textColor values: primary-emphasis, secondary-emphasis, success-emphasis, danger-emphasis, warning-emphasis, info-emphasis, light-emphasis, body, body-emphasis, body-secondary, body-tertiary, black, black-50, white, white-50.

CButton

  • Breaking Renamed component property to as.

CCard

  • Deprecated textColor values: muted, high-emphasis, medium-emphasis, disabled, high-emphasis-inverse, medium-emphasis-inverse, disabled-inverse.
  • New textColor values: primary-emphasis, secondary-emphasis, success-emphasis, danger-emphasis, warning-emphasis, info-emphasis, light-emphasis, body, body-emphasis, body-secondary, body-tertiary, black, black-50, white, white-50.

CCardHeader

  • Breaking Renamed component property to as.

CCardImage

  • Breaking Renamed component property to as.

CCardSubtitle

  • Breaking Renamed component property to as.

CCardText

  • Breaking Renamed component property to as.

CCardTitle

  • Breaking Renamed component property to as.

CCloseButton

  • Deprecated property white, use dark instead of.

CDatePicker

  • Removed property format, use inputDateFormat instead of.
// Previous markup
<CDatePicker format="MMMM-dd-yyyy"/>

// New markup
import { format } from 'date-fns'
//...
<CDatePicker :inputDateFormat="(date) => format(new Date(date), 'MMMM-dd-yyyy')" />
  • date-change event return only the date object, instead of the date object and formatted string.

CDateRangePicker

  • Removed property format, use inputDateFormat instead of.
// Previous markup
<CDateRangePicker format="MMMM-dd-yyyy"/>

// New markup
import { format } from 'date-fns'
//...
<CDateRangePicker :inputDateFormat="(date) => format(new Date(date), 'MMMM-dd-yyyy')" />
  • start-date-change and end-date-change events return only the date object, instead of the date object and formatted string.

CDropdown

  • Breaking Renamed component property to as.

CDropdownHeader

  • Breaking Renamed component property to as.

CDropdownItem

  • Breaking Renamed component property to as.

CDropdownItemPlain

  • Breaking Renamed component property to as.

CDropdownMenu

  • Breaking Renamed component property to as.

CDropdownToggle

  • Breaking Renamed component property to as.

CFormFeedback

  • Breaking Renamed component property to as.

CFormText

  • Breaking Renamed component property to as.

CHeaderBrand

  • Breaking Renamed component property to as.

CHeaderNav

  • Breaking Renamed component property to as.

CInputGroupText

  • Breaking Renamed component property to as.
  • Breaking Renamed component property to as.

CListGroup

  • Breaking Renamed component property to as.

CListGroupItem

  • Breaking Renamed component property to as.

CModalTitle

  • Breaking Renamed component property to as.

CMultiSelect

  • Removed key text in the options list, use label instead

CNav

  • The underline variant has been changed to underline-border

CNavbar

  • Breaking Renamed component property to as.

CNavbarBrand

  • Breaking Renamed component property to as.

CNavbarNav

  • Breaking Renamed component property to as.

CNavItem

  • Breaking Renamed component property to as.
  • Breaking Renamed component property to as.

CNavTitle

  • Breaking Renamed component property to as.

COffcanvasTitle

  • Breaking Renamed component property to as.

CPaginationItem

  • Breaking Renamed component property to as.

CPlaceholder

  • Breaking Renamed component property to as.

CSidebar

  • Breaking Sidebar has a light color scheme by default, use colorScheme="dark" to make it dark.

CSpinner

  • Breaking Renamed component property to as.

CToastClose

  • Breaking Renamed component property to as.
  • Deprecated property white, use dark instead of.