Migration Guide

From 2.1.0 to 2.2.0

For more details please check Changelog

  • Copy over dependencies from package.json or install the following packages if you use fullcalendar or world map
{
 "d3": "^5.7.0",
 "datamaps": "^0.5.9",
 "fullcalendar": "^4.0.0-alpha.3",
 "topojson": "^3.0.2"
 }
  • Upgrade the following dependencies
{
    "chart.js": "^2.7.2",
    "fullcalendar": "^4.0.0-alpha.3",
    "sweetalert2": "^6.11.4",
    "vee-validate": "^2.1.4",
    "vue": "^2.5.21",
    "vue-chartjs": "^3.3.2"
}
  • If you haven't changed the code from src/components/UIComponents, simply copy the folder from the zip archive to your project. Here's the list of components that were changed:
Wizard.vue
formGroupInput.vue
Switch.vue
Charts folder (Better copy the whole folder)
SidebarPlugin/index.js
  • Copy over src/assets/sass folder. Below is the list of files that changed

From 1.1.0 to 2.0.0

2.0.0 includes 2 major changes:

  • upgrade to Vue CLI 3

  • upgrade from Bootstrap 3 to Bootstrap 4.

2.0.0 also includes lots of new custom components, bug fixes and style tweaks.

The changes below might seem a bit painful at first sight and they might require 1 or 2 hours of your time but the end benefits are pretty big especially for the Vue CLI 3 upgrade. You won't have to worry about webpack stuff anymore, complicated config files as well as tons of dependencies. This is all handled by Vue CLI 3. You can add new plugins such as PWA support only by typing vue add pwa. For more details check out the docs for that

A more easy update could be to use this project structure as it is and copy paste your own src/components/Dashboard, routes folder and sidebarLinks.js file.

If you had extra dependencies installed, make sure you add them. Same applies to modified/added css assets or images.

Also please follow the changes. Due to the fact that Bootstrap introduced quite a lot of changes from version 3 to 4, make sure you go through the Bootstrap 4 related changes below (especially grid and card changes)

If the above doesn't work, please follow the detailed changes and try to update step by step. If you have troubles, feel free to contact us via support.

  • We recommend using yarn. Latest npm versions are a bit buggy. Also a strong recommendation is to not use npm and yarn together as it will cause ugly issues. Use only one of them.

  • Move static folder and index.html to public folder. Add images from dashboard public/static/img to your project.

  • Replace devDependencies and scripts in package.json with those from version 2.0.0. If you have some extra dependencies added, make sure you add them as well along with the list of dev dependencies from v2.

  • Copy over .bablerc, vue.config.js file from version v2.0.0

  • Delete build and config folders. If you have custom webpack configuration, please visit the documentation of Vue CLI on how to change webpack related stuff.

  • Copy over src/components/UIComponents, src/globalComponents.js, src/assets from v2.0.0 in your project

  • Update bootstrap version in index.html "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"

  • Package additions: vue2-transitions

  • All col-xs- should be converted to col-. Bootstrap 4 is mobile first and therefore col- will affect all screen sizes including the smallest.

  • We added new components for cards, buttons. Please make sure you use them. If you have plain html for cards. Change card-content class with card-body. This is necessary so we are inline with Bootstrap 4 cards.

  • If you used the timeline, make sure you import it from the base components folder. import {TimeLine, TimeLineItem} from 'src/components/UIComponents'. The body slot changed to content slot. Also, make sure you use the new provided set of icons. A small change regarding timeline is that old plain labels can now be replaced with badges. For example <span class="label label-success">Another Title</span> -> <badge type="success">Another Title</badge> Badge component can be imported like this: import {Badge} from 'src/components/UIComponents'

  • We provided custom components for collapse, collapse item. They have the same behaviour as those from element ui so you can simply replace <el-collapse> with <collapse> and <el-collapse-item> with <collapse-item>. To import Collapse components just use import {Collapse, CollapseItem} from 'src/components/UIComponents'

  • For tabs we created new components located right in the project. Import the components import {Tabs, TabPane} from 'src/components/UIComponents' Simply replace. vue-tabs with tabs and v-tab with tab-pane. For vertical tabs, change direction="vertical" prop to vertical. E.g <tabs vertical>

  • For dropdown menus links, use class="dropdown-item". Example <a class="dropdown-item" href="#">Action</a>

From 1.0.0 to 1.1.0

If you start a new project, simply use this template as it is. If you try to upgrade from 1.0.0 to 1.1.0 you should do the following things:

  • Make sure dependencies in package.json are up to date. Especially element-ui, vue and vue-router. You can use a DiffTool to check what has changed

  • If you didn't change devDependencies, simply copy them from this project and run yarn install or npm install If you made changes to the devDependencies, make a diff online DiffTool and see what packages were upgraded in comparison to your project. Update them and run yarn install or npm install. Make sure vue-template-compiler has the same version as vue

  • If you didn't modify .babelrc, copy it from this project. If you did, change theme-default to theme-chalk in the plugins section

  • Copy over src/components/UIComponents folder to your project.

  • Copy src/assets/sass folder to your project

  • Copy src/pollyfills.js to your project inside src folder (this is mainly to support IE 9, 10 and 11)

  • If you didn't modify anything inside the test folder copy it over to your project

  • Add the following lines in your entry/main file

     import './pollyfills'
 import './assets/sass/element_variables.scss'

  • If you have any problems, feel free to Open an issue

  • PS: The next updates will be less painless and will not include so many changes.

← Change Log →