❤️ 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,897
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

PRO version still in progress?

cristi.jora
  • downloaded

@thaodx Yes, the PRO is still in progress. The code is 95% done I would say. We are going to start working on the documentation this week.
6 years ago

thaodx
  • downloaded
6 years ago

It's very helpful if CT team can add messenger components to Paper

alexpaduraru
  • owner

@thaodx thank you for the feedback. We will launch v1.0.0 which will be like this: http://demos.creative-tim.com/paper-dashboard-pro/examples/dashboard/overview.html. Then, based on the feedback that we get from our customers, we will see what new components we will add. Do you have an example for the messenger component? It should be only the design or it should contain also the logic for it to work? Best, Alex!
6 years ago

thaodx
  • downloaded

@alexpaduraru We just need a html design only. IMHO, this messages/messenger pages look very good http://themesanytime.com/startui/messenger.html
6 years ago

alexpaduraru
  • owner

@thaodx thank you for the example. There is a design for the chart and it is looking like this: http://demos.creative-tim.com/paper-dashboard-pro/examples/dashboard/stats.html. It seems your example is more complex. I will talk with @cristi.jora and see if we will add the complex design in v1.1.0. Keep in touch, Alex!
6 years ago

thaodx
  • downloaded

@alexpaduraru Your Chat window look simple but good. Then you should implement it in new page with just add contact sidebar on the left/right.
6 years ago

sugiartocokrowibowo
  • downloaded
6 years ago

Terimakasih banyak... :D

pororo_
  • downloaded
6 years ago

Thanks a lot

arendon1
  • downloaded
6 years ago

I think i'm in loved. I'm using your products to learn! Thanks for your hard work.

cristi.jora
  • downloaded

@arendon1 Glad to hear that! I think this free version is indeed a good way to learn vue since we tried to embrace some of the best practices & tools from the Vue community.
6 years ago

veber1488
  • downloaded
6 years ago

Hello! Are there any tutorials about how to make dashboard live - for example how to call 3rd party APIs and push JSON data to widgets?

cristi.jora
  • downloaded

@veber1488 Here is one example https://alligator.io/vuejs/rest-api-axios/ You usually use a library to make requests (axios is just an example) and then store the data received from API inside data from your components. This technique can be applied to charts/stats components, tables and so on :)
6 years ago

dimitric
  • downloaded
6 years ago

I bought the pro version of the paper dashboard a few days ago and was thinking of converting the components I need to vue. Now I read in these comments that there is vue version of the pro dashboard in the making. Will the pro Vue version be available for those who purchased the 'normal' pro version? Otherwise I just bought the wrong thing.

cristi.jora
  • downloaded

@alexpaduraru Any thoughts about that ?
6 years ago

alexpaduraru
  • owner

@dimitric thank you for using our products. Those who have an HTML version of Vue Paper Dashboard will be able to upgrade the license just by paying the difference. There will be a 10$ extra for the Vue Version Personal License, compared to the HTML Personal License version. So you don't have to pay again for the full Vue, you just upgrade it. Hope this information helps you. If we can give you any other details just let us know. We are working at this moment for the documentation, hope we will have an official release next week. We will send emails. Best, Alex!
6 years ago

dimitric
  • downloaded

@axelut Thank you for your response. I found Vue Paper Dashboard PRO in my account. Thanks!
6 years ago

dimitric
  • downloaded

@axelut How can I upgrade the HTML version to the vue version as you mentioned? If I add the vue version to my cart I need to pay the full $49 instead of the $10 extra you mentioned.
6 years ago

alexpaduraru
  • owner

@dimitric since we are running a discount campaign and the price of Vue Paper Dashboard PRO is $36.75 we added it as a gift for you. Please check your account and let us know if everything is fine. Best, Alex :D
6 years ago

buezeharry
  • downloaded
6 years ago

This is a one of the most simple and straight to the point dashboard. Thanks alot mate.

alexpaduraru
  • owner

@buezeharry thank you for the kind words! We are glad that you like it :D Stay tuned for the PRO version, it will save you a lot of time. Best, Alex!
6 years ago

stig.nielsson 6 years ago

It looks great. When I build with npm run build, I can see an app.<hash>.css file of 253kb is created with warning that it is big. Anyway to reduce that size?

cristi.jora
  • downloaded

Anonymous Tim Usually, servers where you host your app can gzip your assets which would reduce the sizes of your assets further. You can open the link of the demo https://cristijora.github.io/vue-paper-dashboard/#/admin/overview which is hosted on github and open developer tools in chrome for example. You can see that the size of the css is 44kb there ! I've tried to optimize the size of the assets as much as possible and you can see that because the demo loads pretty fast <500ms on desktop and <2s on mobile with 3G. You can further optimize it and extract some css files and import them async. (e.g import('bootstrap/dist/css/bootstrap.css') ) but I wouldn't recommend doing that unless you fully understand it.
6 years ago

obada
  • downloaded
6 years ago

very nice Dashboard, but i want ask you, i'm trying to use some pf modal forms but it didn't working yet, how i can use modal form inside the dashboard ? thank you

cristi.jora
  • downloaded

@obada Not sure what "pf modal" means but there are a lot of vue-modal components out there https://github.com/vuejs/awesome-vue#overlay This one is a good example and would play nicely with the current dashboard http://sweet-modal-vue.adepto.as/ You can follow the instructions for installation bellow the examples and add modals in a matters of seconds/minutes :)
6 years ago

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