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

bert.hemelsoen
  • downloaded
6 years ago

Do you guys have any idea when there will be a pro-version of this amazing template? :D

cristi.jora
  • downloaded

@bert.hemelsoen We are already working on it. It should be done in around 3 weeks
6 years ago

mohpayoneer
  • downloaded
6 years ago

thanks for the great work guys can't wait to see the pro version, anyone is using this template with laravel?

cristi.jora
  • downloaded

@mohpayoneer Pro version is 60% done but there is still a lot of work to do on it. I haven't used the template with laravel and I'm not sure how it will integrate in a laravel setup. The dashboard is primarily designed to work as a SPA with a vue-cli setup. If you manage to make it work with laravel, please share with us the setup!
6 years ago

devin.gray.email
  • downloaded

You can simply import the components into Laravel, and link them up in the app.js files. It will take a bit of work, but can be done. Would love to build the Pro Version into a Laravel Starter when it comes out
6 years ago

cristi.jora
  • downloaded

@mohpayoneer I wrote an article on how to integrate Vue with .NET MVC which is very simillar to Laravel structure https://medium.com/@cristijora/vue-js-and-net-mvc-b5cede228626 You can pretty much use that setup and copy the source files from this dashboard. After that, it's up to you if you want to keep vue-router or have each page separately as a View in Laravel. @devin.gray.email I know laravel hase laravel-elixir and great vue support so maybe this is not the best setup/option but it works on any MVC project (tested on .NET MVC and Cake PHP)
6 years ago

playniuniu
  • downloaded
6 years ago

great work, thank you very much

alexpaduraru
  • owner

@playniuniu thank you for the kind words! We are glad that you like it :D
6 years ago

hosam
  • downloaded
6 years ago

It's very nice! thanks a lot

athan.d
  • downloaded
6 years ago

Hello, great template! I am trying to integrate it in a laravel project and I am getting issues when I run the compilation probably because of the webpack mix that laravel uses. Is there any easy way to carry out this integration? I am not very keen on webpack and its configuration.

cristi.jora
  • downloaded

Thanks @athan.d. Currently, the template is set-up with vue-cli webpack template. I don't know too much about laravel mix and it's configuration but as long as it supports single file components you could copy the src and static folders to your laravel mix setup and point that main.js from src is your entry point. mix.js('src/main.js', 'dist/app.js');
6 years ago

cristi.jora
  • downloaded

@athan.d You can see my reply from above to mohpayoneer. Here is a sample tutorial and setup for .NET MVC which should be pretty much the same in laravel https://medium.com/@cristijora/vue-js-and-net-mvc-b5cede228626 After that you can use the sources from this dashboard and adjust them to your needs.
6 years ago

marcus.oli.silva
  • downloaded
6 years ago

Hi, how can I use modals with the vue paper dasbboar? I have tried with: data-toggle="modal" data-target="#myModal" But not happened. Ty

cristi.jora
  • downloaded

@marcus.oli.silva This template does not use jQuery at all so therfore, jQuery (bootstrap) modals will not work. unless you import jQuery. I suggest using one out of the many pure vue modals out there https://github.com/cristijora/awesome-vue#overlay A good one for example is this one http://sweet-modal-vue.adepto.as/ It's pretty easy to use
6 years ago

marcus.oli.silva
  • downloaded

@cristi.jora I will try to use those pure vue modals. Thank you!
6 years ago

ahmet5af
  • downloaded
6 years ago

nice

cristi.jora
  • downloaded

@ahmet5af Thanks!
6 years ago

rafał.giemza
  • downloaded
6 years ago

I can't wait for Vue Paper Dashboard Pro! :)

cristi.jora
  • downloaded

@rafał.giemza Glad you are interested in the PRO version. It's in development now and I'd say it's 80% done. It should be ready soon (hopefully next week) so be ready to get it the first :D
6 years ago

alexpaduraru
  • owner

Me neither 😍
6 years ago

thaodx
  • downloaded
6 years ago

Can't wait for PRO version :)

nadine
  • downloaded
6 years ago

I'm also interested in the PRO version, but it would be great if you wrote a simple guide on how can we port the design and components to Laravel or Symfony.

cristi.jora
  • downloaded

@nadine I would be glad to do that but unfortunately I don't have much experience with Laravel. Someone else was also interested in integrating it with Laravel. I guess the build process can be changed and as long as Laravel supports Vue and vue components then you could copy the src and static directory and initialize everything with laravel elixir
6 years ago

cristi.jora
  • downloaded

Hey @nadine Please see my 2 replies from above regarding MVC based setups. Here is an articles with a webpack setup https://medium.com/@cristijora/vue-js-and-net-mvc-b5cede228626 which explains in detail every part of the setup. You can use this webpack.config and the package json and then copy the src folder from this dashboard and adjust to your needs.
6 years ago

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