# Migration to v5 > Track and review changes to the CoreUI for Vue.js components to help you migrate from v4 to v5. 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](https://coreui.io/bootstrap/docs/migration/v5/). ## 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. ```vue // Previous markup // New markup import { format } from 'date-fns' //... ``` - `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. ```vue // Previous markup // New markup import { format } from 'date-fns' //... ``` - `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`. ### CLink - 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. ```vue // Previous markup Docs // New markup Docs ``` ### CNavLink - 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. ```vue // Previous markup // New markup ``` ### 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. ```vue // Previous markup Title // New markup Title ``` ## 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`).