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

hiravora
  • downloaded
2 years ago

Hello, I have created one project with Vue JS for practice and I am new to Vue js. I have also created a component and routing file for the same. I have also created scss file and imported it in style.scss but style is not working. I have also installed a sass-loader in my project and also added Vye.config.Js and webpack.config.js files in the project but somehow it is not working. Can you please help me with that?

dragosct
  • downloaded

Hi, @hiravora ! Thanks for using our products. You don't need to create any files because there are already done. You need to run npm install and npm run dev. Regards, Dragos
2 years ago

johncharlie11223344
  • downloaded
1 year ago

Please update package.json to { "name": "vue-light-bootstrap-dashboard", "version": "2.0.0", "private": true, "description": "Vue light bootstrap dashboard", "author": "cristijora <[email protected]>", "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "e2e": "node test/e2e/runner.js", "lint": "vue-cli-service lint", "dev": "vue-cli-service serve --open", "lint-fix": "vue-cli-service lint --fix" }, "dependencies": { "bootstrap": "^4.3.1", "chartist": "^0.11.0", "google-maps": "^3.2.1", "register-service-worker": "^1.5.2", "v-tooltip": "^2.0.0-rc.33", "vue": "^2.6.6", "core-js": "^2.0.0", "vue-router": "^3.0.2", "vue2-google-maps": "^0.8.4" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.4.0", "@vue/cli-plugin-eslint": "^3.4.0", "@vue/cli-plugin-pwa": "^3.4.0", "@vue/cli-service": "^3.4.0", "node-sass": "^4.11.0", "sass-loader": "^7.1.0", "vue-template-compiler": "^2.6.6" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 11" ] }

johncharlie11223344
  • downloaded
1 year ago

Please add "core-js": "^2.0.0" to package.json dependencies, it will resolve core-js related error while project running.

dragosct
  • downloaded

Hi! Thanks for using our products. We will update the product, thanks!
1 year ago

kceeck
  • downloaded
1 year ago

개새끼야 어떻게 쳐 한거죠?

kceeck
  • downloaded

죄송합니다...
1 year ago

tametilahun123
  • downloaded
5 months ago

npm run build doesnot work

tametilahun123
  • downloaded
5 months ago

Hello there I am using Vue Light Bootstrap Dashboard for development. But I got the following error when I am trying to build the project: Failed to compile with 3 errors 2:24:18 PM error js/app.d64e3d67.js from Terser Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\terser-webpack-plugin\dist\index.js:217:37 at Array.forEach (<anonymous>) at TerserPlugin.optimizeFn (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\terser-webpack-plugin\dist\index.js:160:259) at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1) at AsyncSeriesHook.lazyCompileHook (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\Hook.js:154:20) at D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compilation.js:1409:36 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\Hook.js:154:20) at D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compilation.js:1405:32 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\Hook.js:154:20) at Compilation.seal (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compilation.js:1342:27) at D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compiler.js:675:18 at D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compilation.js:1261:4 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1) at AsyncSeriesHook.lazyCompileHook (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\Hook.js:154:20) at Compilation.finish (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compilation.js:1253:28) at D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compiler.js:672:17 at _done (eval at create (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1) at eval (eval at create (D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:22) at D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compilation.js:1185:12 at D:\vue-light-bootstrap-dashboard-master\vue-light-bootstrap-dashboard-master\node_modules\webpack\lib\Compilation.js:1097:9 at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

oeliak
  • downloaded
3 months ago

I updated to vue3, fixed everything, but the routing gives an error Uncaught runtime errors: × ERROR Cannot read properties of null (reading 'Symbol(_leaveCb)') TypeError: Cannot read properties of null (reading 'Symbol(_leaveCb)') at Object.beforeEnter (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2344:82) at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5458:18) at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5370:7) at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5242:11) at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5909:11) at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:217:19) at instance.update (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6015:51) at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6023:5) at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5813:5) at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5766:9)

sajadevo
  • owner

Hey @oeliak, it appears that the issue relates to your use of the beforeEnter hook. We recommend referring to the Vue 3 migration guide here: https://router.vuejs.org/guide/migration/, and reviewing the usage of navigation guards here: https://router.vuejs.org/guide/advanced/navigation-guards.html.
3 months ago

alexanderlorenzofrias
  • downloaded
14 days ago

I'm using React 18. I can't add new route to my page. I'm going to routes.js and adding a new route like other and creating a new component but gives me error that

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