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

brianfurlong
  • downloaded
5 years ago

I have used ElementUI for a datepicker and bootstrap-vue in general in an existing SPA app. Does "Vue Light Pro" have a date-picker or woud I continue with the one I have? Also, I am thinking to use this it would be best to simply migrate my current Vue components from the existing vue-cli 3.0 solution INTO the Vue Light Pro project? Or would it be less troublesome to migrate your stuff into my project? My objective is to replace the original templated layout (upgraded to BS4 from an earlier version of BS) with barely functioning layout and nav with something better that works correctly

cristi.jora
  • downloaded

Hello @brianfurlong It's rather hard to give a very concise advice in this case. The PRO version uses element-ui so you'll be fine with the datepicker, since the PRO version actually uses element ui datepickers as well. As for bootstrap-vue, it depends, some components from bootstrap-vue might not work out of the box because of the different styling they have. Depending on how much time you have, I will do an update to Vue CLI 3 (PRO version) in the following 3 weeks. If you're in a hurry I'd say that you can directly use the dashboard stuff in your Vue CLI 3 project. The things to take care of are the dependencies (not dev dependencies) and the `src` webpack alias which is present in Vue LBD PRO. If you need more details, you can open a support ticket and I'll try to give you advice on this.
5 years ago

princeallan5
  • downloaded
5 years ago

Hi @cristi.jora , i will like to applaud you for your great job! I ran into a problem while trying to integrate this with my laravel app.. is there any docs on how i can easily achieve this. Regards

cristi.jora
  • downloaded

Hello @princeallan5 At the moment we don't have direct integration with laravel but there are some people who already did it. For example this repo https://github.com/j574144/Laravel-VLBD
5 years ago

princeallan5
  • downloaded
5 years ago

@cristi.jora Thank you for your reply.. I just wanted to lazy around but i guess i will need to give it some time. I hope i could get that already made template though

anojatapattu 5 years ago

Nice theme for dashboards. Documentation link missing is missing and github directives are incorrect or said page not available. Can you share the up to date documentation link if possible. Thank you

siropistroafé 5 years ago

Hi @cristi.jora, I am new in vuejs, I would like to join this dashboard with the 'Login' of "Vue Now UI Kit" but I have not been able to achieve it, Could you patiently explain to me how to achieve it? Thank you

cristi.jora
  • downloaded

Hey siropistroafé. Although this might sound tempting, I wouldn't recommend doing that since those are 2 different templates with different css and code. It will be better if you build the login page yourself. As an example you could take the look & feel of the login page from PRO version https://demos.creative-tim.com/vue-light-bootstrap-dashboard-pro/#/login Also, if you want you could simply buy the PRO version and use the already made login page :)
5 years ago

jobal04
  • downloaded
5 years ago

Nice :)

cleverkaran
  • downloaded
4 years ago

Hey @cristi.jora , thank you for the template! I have been trying to populate values into the Vue chart using values I get from a Rest API. I am trying to push the values inside the series array however it does not seem to work. Would you know how to get values into the chart using Axios? Thanks

cristi.jora
  • downloaded

Hi @cleverkaran Thank you for using our products. I think you should pass chartData as an object to the ChartCard component and this object should contain labels and series. Take a look at the existing examples. In case it still doesn't work you could try adding a "key" attribute on the chart-card component and change it once you set data from api (this will trigger a re-render of the chart component)
4 years ago

mayzenshtadt
  • downloaded
4 years ago

Hey, thanks for the template! I only managed to build it after adding a dependency "core-js": "~2.5.7", which was the current version at the time of publishing a year ago. Is there something wrong with my system, or it's actually missing from package.json?

cristi.jora
  • downloaded

Hm strange. Actually I think that latest Vue cli version requires this core-js dependency so it's fine to have it.
4 years ago

otuwilliam6
  • downloaded

i am having the same issue here
4 years ago

teddymczieuwa 4 years ago

Good day, please is there any way to add this template to an already existing vue application with vue-cli? I created a project from scratch, I would like to upgrade the admin styling. Please how do I go about it

dawoodhaudary
  • downloaded
4 years ago

When i npm run dev it after npm i it gives npm install --save core-js/modules/es6.regexp.to-string this dependency is missing and when i try to install it says Could not install from "core-js\modules\es6.regexp.to-string" as it does not contain a package.json file kindly guide me whats wrong thanks

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