Vue Light Bootstrap Dashboard PRO

Help us be cool on Github! 😏 Take a look at our Material Dashboard and if you love it as much as we do, give us a star ⭐️ 🐱

Vue Light Bootstrap Dashboard PRO

Premium Bootstrap 4 Vuejs Admin Template
· 4.80/5 (12 Reviews)

License

225 Downloads
40 Comments
Premium Support
Lifetime Updates
Release: 5 months ago
Update: 3 months ago

160 Handcrafted Components

17 Customized Plugins

25 Example Pages

Bootstrap Based

Documentation

Fully Responsive

Product certified by: Creative Tim

Get Free Demo

Learn more about Vue Light Bootstrap Dashboard PRO in the light demo version. It has features from the full version. We hope you will like this introduction to this product!

What is in Demo?
  • Components · 16
  • Plugins · 2
  • Examples Pages · 4
  • -
  • -
  • -
What is in PRO Version?
  • Components · 160
  • Plugins · 17
  • Example Pages · 25
  • + Documentation
  • + SASS Files
  • + Sketch Files
Get Free Demo

We are here to help you!

40 Web Developers commented on this product

Report issue

jserge
  • downloaded
2 months ago

Question about <vue-tabs> layout. How can I set the form width to be 100% in the following layout: <div class="row"><card><vue-tabs><v-tab><card><form>. Currently the form is displayed as about 30% width.

jserge
  • downloaded

Adding a note, if I add a <p> with some long text into the <card> it stretches the form but how to force the form to be wide without it.
2 months ago

dcastro2716
  • downloaded
1 month ago

Hi! i would like to know if is posible to change the language of the template. Even if i have to do it manually, is posible to translate to spanish? for example the date picker component. Thanks!

cristi.jora
  • owner

Hi @dcastro2716 Sorry for the late response here. We used element-ui for more complex components. You can easily change the language of those components as element-ui supports over 20 languages http://element.eleme.io/#/en-US/component/i18n
1 month ago

le7
  • downloaded
1 month ago

How to remove Hash mode? i will use history mode for vue router

cristi.jora
  • owner

Hello @Ie7 You can check out the vue router documentation on how to do that https://router.vuejs.org/en/essentials/history-mode.html There are some gotchas (configuration on server) when deploying.
1 month ago

spevilgenius
  • downloaded
1 month ago

Was very impressed with this and looking to purchase but want to be sure that it includes the sass (.scss) files and that they could be modified as needed. Does it use gulp/webpack?

cristi.jora
  • owner

Hello @spevilgenius This exact template is based on the official Vue webpack template https://github.com/vuejs-templates/webpack It does include all the necessary sass files and variables for them. You can check the free version https://www.creative-tim.com/product/vue-light-bootstrap-dashboard This version has pretty much the same folder structure and configuration but it includes more examples & components.
1 month ago

archsh 1 month ago

Hello, I bought vue-lbd-pro-html-v1.0.0 before, but I can not build it under CentOS 7 due to the following error: ERROR in ./~/css-loader?{"minimize":true,"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./src/assets/sass/light-bootstrap-dashboard.scss Module build failed: .form-group.#{$type} { ^ Invalid CSS after " .form-group": expected selector, was "." in /home/shenmc/Works/vue-lbd-pro-html-v1.0.0/src/assets/sass/lbd/element/_input.scss (line 5, column 3) @ ./src/assets/sass/light-bootstrap-dashboard.scss 4:14-171 @ ./src/light-bootstrap-main.js @ ./src/main.js ERROR in ./src/assets/sass/light-bootstrap-dashboard.scss Module build failed: ModuleBuildError: Module build failed: .form-group.#{$type} { ^ Invalid CSS after " .form-group": expected selector, was "." in /home/shenmc/Works/vue-lbd-pro-html-v1.0.0/src/assets/sass/lbd/element/_input.scss (line 5, column 3) at runLoaders (/home/shenmc/Works/vue-lbd-pro-html-v1.0.0/node_modules/webpack/lib/NormalModule.js:192:19) at /home/shenmc/Works/vue-lbd-pro-html-v1.0.0/node_modules/loader-runner/lib/LoaderRunner.js:364:11 at /home/shenmc/Works/vue-lbd-pro-html-v1.0.0/node_modules/loader-runner/lib/LoaderRunner.js:230:18 at context.callback (/home/shenmc/Works/vue-lbd-pro-html-v1.0.0/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at Object.asyncSassJobQueue.push [as callback] (/home/shenmc/Works/vue-lbd-pro-html-v1.0.0/node_modules/sass-loader/lib/loader.js:55:13) at Object.done [as callback] (/home/shenmc/Works/vue-lbd-pro-html-v1.0.0/node_modules/neo-async/async.js:7974:18) at options.error (/home/shenmc/Works/vue-lbd-pro-html-v1.0.0/node_modules/node-sass/lib/index.js:294:32) Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: `cross-env ENABLE_ESLINT=true node build/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/shenmc/.npm/_logs/2018-05-14T10_10_06_270Z-debug.log --- Any help will be great. Thanks.

archsh

Ok, It's solved. Just force npm to install [email protected] instead of 4.9.0. I don't know why.
1 month ago

cristi.jora
  • owner

Hello @archsh . Glad you solved the issue first of all. I can tell that the main cause is the Node.js version. If you have a node.js version > 9 then most likely some packages like node sass have to be upgraded. My recommendation would be to use the latest stable node version which is 8.11.1. This way everything should be stable and work with no issues.
1 month ago

xzq 1 month ago

hello.. i want change left menu > a link style change> documentation/css/light-bootstrap-dashboard.css >> .sidebar .nav .nav-item .nav-link { line-height:30px > 23px } but not changed

xzq

Ok, It's solved. scss file
1 month ago

edwinw9o
  • downloaded
25 days ago

Clicking on the documentation URL (http://vuejs.creative-tim.com/vue-light-bootstrap-dashboard-pro/documentation/#/getting-started) leads to a 404. How can I access the documentation for Vue LBD Pro?

cristi.jora
  • owner

Can you try this link @edwinw9o https://demos.creative-tim.com/vue-light-bootstrap-dashboard-pro/documentation/#/getting-started We recently moved all repos to a single domain which might cause some link issues. As a general rule, the documentations for Vue templates are under `demo-url/documentation/#/getting-started`
15 days ago

sylvainc 23 days ago

Does this template include vue-CLI implementation as the other newest themes? Thank you

sylvainc

Hello @cristi.jora , do you know if you will be including the new Vue CLI in this template? Thank you
15 days ago

cristi.jora
  • owner

Hi @sylvainc Yes, the template will be updated to Vue CLI 3 as it's much easier to maintain and use. You might as well do the change yourself because it's not that hard. You can initialize a new Vue CLI 3 template, install node-sass, sass-loader and the dependencies you have in the project, copy the src folder in your project and move the static and index.html file to `public` folder. A final thing you need is a webpack alias to `src` or simply replace all imports ending with `from 'src/` with `from '@/` where @ is the default webpack alias to the src folder.
15 days ago

cristi.jora
  • owner

Hi @sylvainc Yes, the template will be updated to Vue CLI 3 as it's much easier to maintain and use. You might as well do the change yourself because it's not that hard. You can initialize a new Vue CLI 3 template, install node-sass, sass-loader and the dependencies you have in the project, copy the src folder in your project and move the static and index.html file to `public` folder. A final thing you need is a webpack alias to `src` or simply replace all imports ending with `from 'src/` with `from '@/` where @ is the default webpack alias to the src folder.
15 days ago

eeponce 13 days ago

Hello this template can be integrated into Laravel 5.6 with Blade? or this use html of component?

galdino
  • downloaded
7 days ago

Hello, i would like to know which attribute i have to replace o reasign in order to render an array of objects in the PaginatedTable components, since i've been trying and cannot figure it out

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

Why our customers appreciate us

Design Quality

ooo si

Design Quality

It's not just an (awesome) bootstrap theme. It's also a solid vuejs starter kit to create a professionnal dashboard !

Design Quality

Great theme