Hire UsGet CoreUI PRO all-access →

Migration to v5

MarkdownChatGPTClaude

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.

Dependencies

  • Breaking The vue peer dependency changed from ^3.2.21 to ^3.5.0. Upgrade Vue to 3.5 or newer.
  • @coreui/coreui-pro is now a dependency of @coreui/vue-pro, not a peer dependency. Keep it in your own package.json if you import the stylesheet from it.
  • @popperjs/core is now a dependency of @coreui/vue-pro. In v4 it was bundled into the build. You do not need to install it yourself.
  • date-fns is no longer bundled. v4 used it for the format property of the date pickers. Install it yourself if you use it in inputDateFormat.
  • Breaking The build files moved. The ES build moved from dist/index.es.js to dist/esm/index.js, the CommonJS build from dist/index.js to dist/cjs/index.js, and the types from dist/index.d.ts to dist/esm/index.d.ts. Import from the package root, @coreui/vue-pro, instead of a build file.

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. The property validator no longer accepts them, so Vue logs a warning in development. The classes still render.
  • 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. The property validator no longer accepts them, so Vue logs a warning in development. The classes still render.
  • 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.

CCalendar

  • Breaking Renamed the calendar-cell-hover event to date-hover. It still emits the hovered date, or null when the pointer leaves.

CCard

  • Deprecated textColor values: muted, high-emphasis, medium-emphasis, disabled, high-emphasis-inverse, medium-emphasis-inverse, disabled-inverse. The property validator no longer accepts them, so Vue logs a warning in development. The classes still render.
  • 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.

CDatePicker

  • Breaking The format property no longer formats the date. Use inputDateFormat instead. Without inputDateFormat, the date is formatted with the locale property.
// Previous markup
<CDatePicker format="MMMM-dd-yyyy"/>

// New markup
import { format } from 'date-fns'
//...
<CDatePicker :inputDateFormat="(date) => format(new Date(date), 'MMMM-dd-yyyy')" />
  • format still makes the input read-only, as it did in v4. If you remove it and want to keep the input read-only, set inputReadOnly.
  • Pair a custom inputDateFormat with inputDateParse, so a typed date is read back with the same pattern.
  • The date-change event still emits the date object and the formatted string. The formatted string now follows inputDateFormat, or the locale property, instead of format.

CDateRangePicker

  • Breaking The format property no longer formats the date. Use inputDateFormat instead. Without inputDateFormat, the date is formatted with the locale property.
// Previous markup
<CDateRangePicker format="MMMM-dd-yyyy"/>

// New markup
import { format } from 'date-fns'
//...
<CDateRangePicker :inputDateFormat="(date) => format(new Date(date), 'MMMM-dd-yyyy')" />
  • format still makes the inputs read-only, as it did in v4. If you remove it and want to keep the inputs read-only, set inputReadOnly.
  • Pair a custom inputDateFormat with inputDateParse, so a typed date is read back with the same pattern.
  • The start-date-change and end-date-change events still emit the date object and the formatted string. The formatted string now follows inputDateFormat, or the locale property, instead of format.
  • Breaking Removed the indicator, cleaner and separator slots. The icons come from the stylesheet. The indicator, cleaner and separator properties still show or hide them.

CDropdown

  • The default variant changed from btn-group to dropdown. The wrapper gets the .dropdown class instead of .btn-group. Set variant="btn-group" to keep the v4 markup.

CDropdownHeader

  • Breaking Renamed component property to as.

CDropdownItem

  • Breaking Renamed component property to as.

CDropdownMenu

  • Breaking Renamed component property to as.

CDropdownToggle

  • Breaking Renamed component property to as.
  • Breaking Removed property active. Add class="active" if you need the style.

CFormFeedback

  • Breaking Renamed component property to as.

CFormRange

  • Breaking Renamed steps property to step.

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.

CLoadingButton

  • Breaking Renamed component property to as.

CModalTitle

  • Breaking Renamed component property to as.

CMultiSelect

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

CNav

  • Breaking Renamed component property to as.
  • The underline variant has been changed to underline-border. Use variant="underline-border" to keep the v4 look. underline is now a different, simpler style.

CNavbar

  • Breaking Renamed component property to as.

CNavbarBrand

  • Breaking Renamed component property to as.

CNavbarNav

  • Breaking Renamed component property to as.

CNavItem

  • Breaking Removed property component. In v4 it set the element of the inner link. In v5, as sets the element of the wrapper, li by default. To change the link element, put a CNavLink inside.
// Previous markup
<CNavItem component="button" href="#">Docs</CNavItem>

// New markup
<CNavItem>
  <CNavLink as="button" href="#">Docs</CNavLink>
</CNavItem>
  • 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.

CProgress

  • New CProgressStacked component for stacked bars. Put one CProgress per segment inside it. Several CProgressBar elements inside one CProgress still render.
// Previous markup
<CProgress>
  <CProgressBar :value="15" />
  <CProgressBar color="success" :value="30" />
</CProgress>

// New markup
<CProgressStacked>
  <CProgress :value="15" />
  <CProgress color="success" :value="30" />
</CProgressStacked>

CSidebar

  • Breaking Sidebar has a light color scheme by default, use colorScheme="dark" to make it dark.
  • Without the visible property, the sidebar is now shown on desktop. In v4 it was hidden. An overlaid sidebar still starts hidden.

CSpinner

  • Breaking Renamed component property to as.

CTimePicker

  • Breaking Removed the indicator and cleaner slots. The icons come from the stylesheet. The indicator and cleaner properties still show or hide them.

CToastClose

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

CToastHeader

  • Breaking Removed the close event. Listen to the close event of the parent CToast instead.
// Previous markup
<CToast>
  <CToastHeader closeButton @close="onClose">Title</CToastHeader>
</CToast>

// New markup
<CToast @close="onClose">
  <CToastHeader closeButton>Title</CToastHeader>
</CToast>

Directives

v-c-popover and v-c-tooltip

  • Breaking content and header are inserted as text, not HTML. Markup in the value shows as literal tags. For HTML content, use CPopover or CTooltip and the content slot (and the title slot of CPopover).