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

Free Bootstrap 4 Vuejs Admin Template

Product description


Vue Light Bootstrap Dashboard is a beautiful resource built over Bootstrap 4 and Vuejs. It will help you get started developing dashboards in no time. Vue Light Bootstrap Dashboard is the official Vuejs version of the Original Light Bootstrap Dashboard. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, Vue and Vue-Router.

Vue Light Bootstrap Dashboard was coded by Cristi Jora and the design was made by Creative Tim. The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Vue Light Bootstrap Dashboard contains handpicked and optimised Vuejs plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customisation of this product.

It comes with 6 filter colors for the sidebar (“black”, “azure”,”green”,”orange”,”red”,”purple”) and an option to have a background image.

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

Getting started

Vue Light Bootstrap Dashboard is built on top of Bootstrap 4, Vuejs 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 Light Bootstrap Dashboard - Fully Coded and Responsive HTML5
Vue Light Bootstrap Dashboard - Sass Files for Professional Front End Developers
Vue Light Bootstrap Dashboard - Crafted with Bootstrap - the most popular Front End Framework
Vue Light Bootstrap Dashboard - The Progressive JavaScript Framework
Downloads
53,533
Version
2.1.0
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 Light Bootstrap 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 17
Examples Pages 4 25
Full Coded
Documentation
SASS Files
Designer Files
Premium Support

We are here to help you!

38 Web Developers commented on this product

sylvan_reinieren
  • downloaded
6 years ago

@cristi.jora I have a small question where can I find the {{link.name}} i couldn't find it in sideBarLinks.

cristi.jora
  • downloaded

Hey sylvan_reinieren `Link` is a property passed to each SidebarLink component https://github.com/cristijora/vue-light-bootstrap-dashboard/blob/master/src/components/UIComponents/SidebarPlugin/SidebarLink.vue#L7 You basically have 2 options. Either pass a string with the route (to) and the link object or use slots as it's used in the demo. https://github.com/cristijora/vue-light-bootstrap-dashboard/blob/master/src/components/Dashboard/Layout/DashboardLayout.vue#L7 If you don't want to pass slots then you can make a sidebar-link like this <sidebar-link to="/admin/overview" v-bind:link="{name: "Overview", icon: "my-icon-class"}"> Another option is to pass the whole sidebarLinks array to the SidebarVue component. https://github.com/cristijora/vue-light-bootstrap-dashboard/blob/master/src/components/UIComponents/SidebarPlugin/SideBar.vue#L20 In this case, the array should contain objects with `name`, `path` and `icon` properties.
6 years ago

bunnetat 6 years ago

Hi I am interested in the Pro version, but would like to see what all the extra's are for example, what are the extra, plug in, components and example pages you get from in pro vs free Also would it be a significant change in the vue pro dashboard functionality (therefore requiring a large amount of work) if a widgets based UI was developed so components could be added to them, and they could be added to a page?

cristi.jora
  • downloaded

Hi @bunnetat You can explore the PRO version here. http://vuejs.creative-tim.com/vue-light-bootstrap-dashboard-pro/#/admin/overview and see exactly what it includes. It has the same code architecture as the free one. Also you can view documentation online here http://vuejs.creative-tim.com/vue-light-bootstrap-dashboard-pro/documentation/#/ and see code samples of how each component is used. All components are exported in a single file ("src/components") which makes the usage pretty similar to the one of a UI library from npm but you have the code in there as well. Hope this helps.
6 years ago

cismat
  • downloaded
6 years ago

It is very good, thank you :-)

cristi.jora
  • downloaded

Thanks a lot @cismat Glad you like it.
6 years ago

michaelcl_chu 6 years ago

Can I use it without webpack?If so,what kink of change should I do?

cristi.jora
  • downloaded

Hi @michaelcl_chu Unfortunately you cannot use it without webpack as webpack is at the base of `.vue` files for now. The only alternative is Parcel https://parceljs.org/ which is a js bundler but "simpler". Now it has Vue support out of the box. We will soon migrate to latest Vue CLI which abstract pretty much all webpack configuration so it's easier to build things. Also if you don't mind sharing your technology stack, I could redirect to the appropriate resources in terms of setup. For example if you use Laravel, there is a slightly different setup but you can easily do that.
6 years ago

missbinibini09
  • downloaded
6 years ago

i am not able to get html file

missbinibini09
  • downloaded
6 years ago

how to get the html file?

alexpaduraru
  • owner

@missbinibini09 please check them here: https://www.creative-tim.com/product/light-bootstrap-dashboard Best, Alex!
6 years ago

pavlo.komarov
  • downloaded
6 years ago

Ubuntu 16.04. after npm install, npm run dev throw error. Log info it worked if it ends with ok 1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'predev', 'dev', 'postdev' ] 5 info lifecycle [email protected]~predev: [email protected] 6 info lifecycle [email protected]~dev: [email protected] 7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true 8 verbose lifecycle [email protected]~dev: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/wow/fe_app/node_modules/.bin:/home/wow/.local/share/umake/bin:/home/wow$ 9 verbose lifecycle [email protected]~dev: CWD: /home/wow/fe_app 10 silly lifecycle [email protected]~dev: Args: [ '-c', 'node build/dev-server.js' ] 11 silly lifecycle [email protected]~dev: Returned: code: 1 signal: null 12 info lifecycle [email protected]~dev: Failed to exec dev script 13 verbose stack Error: [email protected] dev: `node build/dev-server.js` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at EventEmitter.emit (events.js:214:7) 13 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at ChildProcess.emit (events.js:214:7) 13 verbose stack at maybeClose (internal/child_process.js:925:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5) 14 verbose pkgid [email protected] 15 verbose cwd /home/wow/fe_app 16 verbose Linux 4.13.0-38-generic 17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev" 18 verbose node v8.11.1 19 verbose npm v5.6.0 20 error code ELIFECYCLE 21 error errno 1 22 error [email protected] dev: `node build/dev-server.js` 22 error Exit status 1 23 error Failed at the [email protected] dev script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]

zhangpuego
  • downloaded
5 years ago

If I buy Personal License, can I get the code of HTML, and then do two development on this basis? Am I still not very clear about the difference between Personal License and Developer License?

cristi.jora
  • downloaded

Hello @zhangpuego Thank you for your interest and sorry for the late reply. Here you can find more information about licences https://www.creative-tim.com/license This exact product is a dashboard based on Vue.js. If you need a pure html & jquery version you can check it out here https://www.creative-tim.com/product/light-bootstrap-dashboard-pro
5 years ago

polouegos
  • downloaded
5 years ago

hello, this template is using bootstrap-vue?

cristi.jora
  • downloaded

hello @polouegos Unfortunately it is not using bootstrap vue. You can check the package.json https://github.com/creativetimofficial/vue-light-bootstrap-dashboard/blob/master/package.json Feel free to add it in your own project if you have the need for that
5 years ago

brianfurlong
  • downloaded
5 years ago

Hi I tried to use the documentation link in one of the messages above but it returns a 404 ( http://vuejs.creative-tim.com/vue-light-bootstrap-dashboard-pro/documentation/#/ )

cristi.jora
  • downloaded

Hello @brianfurlong We moved the documentation here. https://demos.creative-tim.com/vue-paper-dashboard/documentation/ Also make sure you have the latest version from github https://github.com/creativetimofficial/vue-paper-dashboard
5 years ago

brianfurlong
  • downloaded

@cristi.jora Thanks for the speedy response
5 years ago

cristi.jora
  • downloaded

Just noticed, I put the wrong link in the comment above. Here is the correct link for the LBD PRO https://demos.creative-tim.com/vue-light-bootstrap-dashboard-pro/documentation/#/getting-started
5 years ago

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