core-logo

Migrating to v3.0.0

CoreUI 3.0.0 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.

On this page:



Summary

Here are the big ticket items you’ll want to be aware of when moving from v2.x.x to v3.0.0.

Highlights

  • CoreUI components have been prefixed. We decided to add c- prefix to each class to avoid CSS classes collision and isolate CoreUI’s styles and scripts.
  • CoreUI and Bootstrap source code is deeply integrated. We decided to combine Bootstrap’s and our SCSS and JavaScript files. It allows us to build some new features, ex. Theme switcher, and deliver more consistent, lighter code.
  • Removed jQuery in favor of regular JavaScript. CoreUI Library (@coreui/coreui) doesn’t need jQuery anymore. However, some of the third party components we use in our admin templates still require jQuery.
  • New design which goes in hand with modern standards:
    • Elevations system
    • Themes support
  • Introduce new components libraries for Angular (@coreui/angular), React.js (@coreui/react), and Vue.js (@coreui/vue). The third party components libraries ngx-bootstrap, reactstrap, bootstrap-vue, are deprecated. Since version 3.x our libraries contain not only our components but also cover all Bootstrap’s elements.

By component

This list highlights key changes by component between v2.x.x and v3.0.0.

Following CSS classes have been changed:

  • sidebar to c-sidebar
  • sidebar-header to c-sidebar-header
  • sidebar-brand to c-sidebar-brand
  • sidebar-nav to c-sidebar-nav
  • sidebar-footer to c-sidebar-footer
  • sidebar-minimizer to c-sidebar-minimizer
  • nav-item to c-sidebar-nav-item
  • nav-link to c-sidebar-nav-link
  • nav-dropdown to c-sidebar-nav-dropdown
  • nav-dropdown-items to c-sidebar-nav-dropdown-items
  • nav-dropdown-toggle to c-sidebar-nav-dropdown-toggle
  • nav-divider to c-sidebar-nav-divider
  • nav-title to c-sidebar-nav-title

Following CSS classes have been changed:

  • app-header to c-header
  • navbar-brand to c-header-brand
  • navbar-toggler to c-header-toggler
  • nav to c-header-nav
  • nav-item to c-header-nav-item
  • nav-link to c-header-nav-link

Layout Components

Following CSS classes have been changed:

  • app to c-app
  • app-body to c-body
  • app-footer to c-footer
  • main to c-main

Switches

  • We’ve changed .switch-outline-alt-* to .switch-opposite-*.

Aside Menu

Aside menu has been deprecated, please use <div class="c-sidebar c-sidebar-right">...</div> instead of.

Dependencies

  • new: @babel/polyfill
  • new: bundlesize
  • new: chalk
  • new: cssnano
  • new: eslint-config-xo
  • new: eslint-plugin-import
  • new: eslint-plugin-unicorn
  • new: find-unused-sass-variables
  • new: foreach-cli
  • new: terser
  • removed: babel-plugin-transform-es2015-modules-strip
  • removed: eslint-plugin-compat
  • removed: uglify-js