275 Downloads

45 Comments

Premium Support

6 months Updates

Release: 10 months ago

Update: 3 months ago

Premium Bootstrap 4 Vue.js Admin Template

Product description

Vue Paper Dashboard 2 PRO is a beautiful resource built over Bootstrap and Vue. It will help you get started developing dashboards in no time. Vue Paper Dashboard 2 Pro is the Vue.js ported version of the Original Paper Dashboard 2 Pro. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, Vue and Vue-Router. Vue Paper Dashboard was coded by Cristi Jora and the design was made by Creative Tim. It combines soft colors with beautiful typography and spacious cards and graphics. It is a powerful tool, but it is light and easy to use. It has enough features to allow you to get the job done, but it is not crowded to the point where you can't find the files for a specific plugin.

We like consistency and design that blends into its purpose. Vue Paper Dashboard 2 PRO is a perfect example of our most thoughtful work. It combines Vue.js components and plugins, while looking like everything fits together. For an easy start or inspiration for you project, we have also create a set of example pages, like the user settings or usage graphics.

Vue Paper Dashboard PRO is built using the same design language as Paper Kit 2. You can easily use them together, or pick between them depending on the project you have.

Let us know what you think and what we can improve below. And good luck with development!

Getting started

Vue Paper Dashboard 2 PRO is built on top of Bootstrap 4, Vue and Vue-router and Vue CLI 3. To get started do the following steps:

Sharing is caring!

Updates and Changelogs

Change Log

[2.2.1] 2019-02-12

Package updates

Bundle size improvements

Accessibility & best practices improvements

UI bug fixes for Wizard

[2.2.0] 2019-01-07

Breaking

Updated to fullcalendar 4.0.0-alpha.3 which no longer uses jquery. If you used fullcalendar please check their detailed release notes https://fullcalendar.io/docs/v4/release-notes Some api parts changed

Removed jVectorMaps in favor of datamaps. Check the WorldMap component for more details. If you used the world map, you could simply migrate by installing d3, datamaps and topojson libraries and copying the WorldMap component over.

Removed jquery from the code (fullcalendar and world map)

Improvements & bug fixes

Update packages (Vue cli, element, ui, bootstrap, vue & others)

60 Make all charts reactive by default

66 Add wizard complete event which is triggered when "finish" button is clicked

[2.0.0] 2018-07-11

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.

Vue CLI 3 related changes:

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

Bootstrap 4 related changes:

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>

[1.1.0] 2017-11-07

Package updates

Improve overall webpack config to be as minimal as possible on top of vue-cli. The dashboard currently adds only a single file on top of vue cli webpack.custom.js which is imported in webpack.base.conf.js This allows for seamless vue-cli upgrades.