❤️ Creative Tim Club - Access all our Present & Future Premium Products

Free Bootstrap Vue.js Admin Template

Product description


Vue Paper Dashboard is a beautiful resource built over Bootstrap and Vue. It will help you get started developing dashboards in no time. Vue Paper Dashboard is a Vue ported version of the Original Paper Dashboard. 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 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 is built using the same design language as Paper Kit. 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 is built on top of Bootstrap 3, Vue and Vue-router. To get started do the following steps:

  1. Download the project
  2. Make sure you have node.js installed
  3. Type "npm install" in the source folder where "package.json" is located
  4. Type "npm run dev" to start the development server

The repo uses vue-cli scaffolding which takes care of the development setup with webpack and all the necessary modern tools to make web development faster and easier.

Npm tasks:

  • "npm run dev" - starts a development server on localhost:8080 with live-reload
  • "npm run build" - builds the app for production with javascript minification and versioning
  • "npm run unit" - Runs unit tests located under test\unit folder. There are couple of tests written for you to get a better idea on how to run and write Vue unit tests
  • "npm run unit:watch" - Runs unit tests while listening for any changes in the project. This way you can develop new features and make sure that your old components work as expected without running unit tests every time.
  • "npm run e2e" - Runs end to end tests. The command and the setup for end to end tests is provided by vue-cli. If you need and have the necessity to write end to end tests, feel free to write them under test\e2e folder
  • "npm run test" - Runs both unit and end to end tests.

Product certified by: Creative Tim
Vue Paper Dashboard - Fully Coded and Responsive HTML5
Vue Paper Dashboard - Sass Files for Professional Front End Developers
Vue Paper Dashboard - Crafted with Bootstrap - the most popular Front End Framework
Vue Paper Dashboard - The Progressive JavaScript Framework
Downloads
40,986
Version
1.0.1
Changelog
Updated
1 year ago
Released
6 years ago
Reviews
Star
Handcrafted Elements
16
Customized Plugins
2
Example Pages
4
Community Support
Documentation
Fully Responsive

Upgrade to PRO Version

Get more power with Vue Paper Dashboard PRO. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

What is in Demo? What is in PRO Version?
Elements 16 160
Plugins 2 15
Examples Pages 4 25
Full Coded
Documentation
SASS Files
Designer Files
Premium Support

We are here to help you!

80 Web Developers commented on this product

thaodx
  • downloaded
6 years ago

Hi @cristi.jora The Pro version still in progress?

cristi.jora
  • downloaded

Hi @thaodx . Yes, it is still in progress. The code is pretty much done but I am working on the documentation at the moment.
6 years ago

thaodx
  • downloaded

Is there any fixed date of release @cristi.jora ? Then i don't need to open this page everyday to check :D
6 years ago

cristi.jora
  • downloaded

@thaodx Unfortunately I'm not sure I can answer that. I am working on a nice documentation with storybook where you can view components individually and play with them. I am sure that you will be notified by email among the first ones when the dashboard is ready and published here !
6 years ago

aggronacho
  • downloaded
6 years ago

I'm waiting the pro version for this dashboard, it looks great.

alexpaduraru
  • owner

@aggronacho thank you for your interest in our product. It should come in a couple of days. we are doing some final tests. We will send emails if you have the Free version downloaded or if you are subscribed to our newsletter. Thank you for your patience. Best, Alex!
6 years ago

vision8r
  • downloaded
6 years ago

I'm also interested in the Pro version. Thanks!

alexpaduraru
  • owner

@vision8r hank you for your interest in our product. It should come in a couple of days. we are doing some final tests. You will get an email because you downloaded the Free version. Thank you for your patience. Best, Alex!
6 years ago

vision8r
  • downloaded

@alexpaduraru Lovely! And thanks for the feedback! :-)
6 years ago

miranda.w.sam
  • downloaded
6 years ago

Will the pro version support multi-language ? in my case, I would like to build a software in portuguese.

cristi.jora
  • downloaded

@miranda.w.sam The first version will not have built in support for multi-language but we used Element-UI for many components which supports multi-language (around 35 languages I think) For the rest you could use vue-ii8n and customize for your own needs.
6 years ago

miranda.w.sam
  • downloaded

Ok, So I'm free to customize ? I would like to create some components in the free version then move to pro version ? is this possible ? Thanks.
6 years ago

bersnardc 6 years ago

Beautiful.. :-)

josué.martinez
  • downloaded
6 years ago

Hi @cristi.jora The Pro version still in progress? I really want to get the pro version Thanks!

cristi.jora
  • downloaded

@josué.martinez Yes. There is a big change that we will release it next week. You will get an email whenever it is released.
6 years ago

thaodx
  • downloaded

What is the big change? @cristi.jora I'm so excited to hand-on the PRO version :)
6 years ago

marcus.oli.silva
  • downloaded
6 years ago

Hi everyone, How can I set a loading spinner (or some user feedback) and block the user interaction when a user click on a button and the application call some axios request? Thanks! Excited to get the pro version!

cristi.jora
  • downloaded

@marcus.oli.silva If you want to disable a button after performing a request you could simply set the button as disabled while the request performs <button :disabled="isLoading"> this.isLoading = true this.axios.get(....).then((res) => this.isLoading = false)) I can't really format the code very well here. The PRO version uses element-ui which has some nice components for loading. Here is a full screen loading example from element-ui https://jsfiddle.net/api/post/library/pure/
6 years ago

marcus.oli.silva
  • downloaded

@cristi.jora Thank u!
6 years ago

marcus.oli.silva
  • downloaded
6 years ago

Hi @cristi.jora, Is it possbile to handle the close event of the PaperNotification plugin after the notification closes? I wan to refresh/redirect the route after a user click on the notification close button or when the timeout ends. Sorry for My english!

cristi.jora
  • downloaded

@marcus.oli.silva Currently no, but you can easily do that. Go to Notifications.vue inside Notification Plugin and upon notification removal here https://github.com/cristijora/vue-paper-dashboard/blob/master/src/components/UIComponents/NotificationPlugin/Notifications.vue#L24 You could "this.$emit('on-remove', index)", or perhaps search for the notification inside this.$notifications.state if you need it. Where you declare your <notifications></notificaitons> you could simply handle this event like so: <notifications @on-remove="handleNotificationRemove"></notificaitons> handleNotificationRemove(index){ // do your stuff here }
6 years ago

dsmurrell
  • downloaded
6 years ago

Where is support mostly done? Through this public channel? Through the github repo? By emailing you guys? I know a lot have asked this already but what's the ETA on the PRO version of this? :D

cristi.jora
  • downloaded

Anonymous Tim For the free version you can ask basic questions here, but the repo is on github. https://github.com/cristijora/vue-paper-dashboard You can open issues, start discussions, suggest something and so on if you feel that something does not work correctly or is buggy. For the PRO version, there will most likely be a repository where you can open issues as well. Regarding ETA of PRO version, I will be very happy to release it as soon as possible just like you guys :D. I really hope we can do it this week as the code and documentation is done. It needs a proper review and some refinements before releasing :)
6 years ago

dsmurrell
  • downloaded

@cristi.jora Thanks. So, if I order the PRO. Do I have to ask questions here as well or is there another communication for support with the software that isn't a bug (i.e. can't use github)? Is there another template that this particular dashboard integrates well with? For example, dashboard for logged in user other template for landing page. I'm happy to test the PRO if you have a need for that. Let me know.
6 years ago

thaodx
  • downloaded
6 years ago

The pro version get delayed? @cristi.jora

cristi.jora
  • downloaded

@thaodx First version is up https://www.creative-tim.com/product/vue-paper-dashboard-pro
6 years ago

thaodx
  • downloaded

Thank God. I mean thank you @cristi.jora 😘
6 years ago

You have to be logged in to post a comment. Login here.