← Back to template page

Admin One Bulma Vue 2

Vue.js 2 Bulma Buefy dashboard template with dark mode

Bulma
Buefy
Vue 2.x
Vite & Vue CLI
Dark mode

package.json

Options API version

Classic Options API using data, computed, methods, etc.

{
  "name": "admin-one-vue-bulma-dashboard-premium",
  "version": "1.9.3",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --modern",
    "deploy:gh-pages": "cross-env NODE_DEBUG=gh-pages gh-pages -d dist -b demo -t",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "buefy": "^0.9.6",
    "bulma": "^0.9.2",
    "chart.js": "^2.9.4",
    "core-js": "^3.10.1",
    "dayjs": "^1.10.4",
    "lodash": "^4.17.21",
    "numeral": "^2.0.6",
    "perfect-scrollbar": "^1.5.0",
    "register-service-worker": "^1.7.2",
    "spinkit": "^1.2.5",
    "vue": "^2.6.12",
    "vue-chartjs": "^3.5.1",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-pwa": "^4.5.12",
    "@vue/cli-plugin-router": "^4.5.12",
    "@vue/cli-plugin-vuex": "^4.5.12",
    "@vue/cli-service": "^4.5.12",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.3",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^7.8.0",
    "gh-pages": "^3.1.0",
    "sass": "^1.32.7",
    "sass-loader": "^10.1.1",
    "vue-template-compiler": "^2.6.12"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Composition API version

Vue.js 2.x Composition API with setup

{
  "name": "admin-one-vue-bulma-dashboard-premium",
  "version": "2.1.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "serve": "vue-cli-service serve",
    "serve:vite": "vite serve",
    "build": "vue-cli-service build --modern",
    "build:vite": "vite build",
    "lint": "vue-cli-service lint",
    "lint:fix": "vue-cli-service lint --fix"
  },
  "dependencies": {
    "@vue/composition-api": "^1.4.1",
    "axios": "^0.21.1",
    "buefy": "^0.9.6",
    "bulma": "^0.9.2",
    "chart.js": "^2.9.4",
    "core-js": "^3.10.1",
    "dayjs": "^1.10.4",
    "lodash": "^4.17.21",
    "numeral": "^2.0.6",
    "spinkit": "^1.2.5",
    "vue": "^2.6.12",
    "vue-chartjs": "^3.5.1",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-router": "^4.5.12",
    "@vue/cli-plugin-vuex": "^4.5.12",
    "@vue/cli-service": "^4.5.12",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^7.8.0",
    "sass": "^1.32.7",
    "sass-loader": "^10.1.1",
    "vite": "^2.6.14",
    "vite-plugin-vue2": "^1.9.0",
    "vue-template-compiler": "^2.6.12"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Vanilla HTML version

Vanilla HTML/Scss version

{
  "name": "admin-one-bulma-dashboard-premium",
  "version": "1.9.0",
  "description": "Admin One Bulma Admin dashboard premium (HTML version)",
  "homepage": "https://justboil.me/bulma-admin-template/one",
  "keywords": [
    "sass",
    "bulma",
    "css",
    "html",
    "dashboard"
  ],
  "author": "Viktor Kuzhelnyi <[email protected]> (https://justboil.me)",
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@mdi/font": "^4.9.95",
    "bulma": "^0.9.2",
    "bulma-checkbox": "^1.1.1",
    "bulma-radio": "^1.1.1",
    "bulma-responsive-tables": "^1.2.3",
    "bulma-switch-control": "^1.1.1",
    "bulma-upload-control": "^1.2.0",
    "chart.js": "^2.9.4",
    "gh-pages": "^3.1.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-purgecss": "^4.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-replace": "^1.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2",
    "node-sass": "^5.0.0",
    "perfect-scrollbar": "^1.5.0",
    "spinkit": "^1.2.5"
  },
  "scripts": {
    "build": "gulp",
    "deploy": "gh-pages -d demo"
  }
}

File structure

Vue.js versions

Package structure for Vue.js versions

└─ admin-one-vue-bulma-dashboard-premium
   ├─ .editorconfig
   ├─ .eslintrc.js
   ├─ README.md
   ├─ babel.config.js
   ├─ index.html
   ├─ jsconfig.json
   ├─ package-lock.json
   ├─ package.json
   ├─ public
   │  ├─ data-sources
   │  │  ├─ clients.json
   │  │  ├─ comments.json
   │  │  ├─ stuff-updates.json
   │  │  └─ updates.json
   │  ├─ favicon.png
   │  ├─ img
   │  │  └─ icons
   │  │     ├─ android-chrome-192x192.png
   │  │     ├─ android-chrome-512x512.png
   │  │     ├─ apple-touch-icon-120x120.png
   │  │     ├─ apple-touch-icon-152x152.png
   │  │     ├─ apple-touch-icon-180x180.png
   │  │     ├─ apple-touch-icon-60x60.png
   │  │     ├─ apple-touch-icon-76x76.png
   │  │     ├─ apple-touch-icon.png
   │  │     ├─ favicon-16x16.png
   │  │     ├─ favicon-32x32.png
   │  │     ├─ msapplication-icon-144x144.png
   │  │     ├─ mstile-150x150.png
   │  │     └─ safari-pinned-tab.svg
   │  ├─ index.html
   │  ├─ manifest.json
   │  └─ robots.txt
   ├─ src
   │  ├─ App.vue
   │  ├─ AppDefault.vue
   │  ├─ AppLightDark.vue
   │  ├─ assets
   │  │  ├─ jblogo-icon.png
   │  │  ├─ justboil-logo-black.png
   │  │  ├─ justboil-logo-darkblue.png
   │  │  ├─ justboil-logo-white.png
   │  │  ├─ justboil-logo.svg
   │  │  └─ [email protected]
   │  ├─ components
   │  │  ├─ AsideMenu.vue
   │  │  ├─ AsideMenuItem.vue
   │  │  ├─ AsideMenuList.vue
   │  │  ├─ AsideRight.vue
   │  │  ├─ AsideTools.vue
   │  │  ├─ AsideUpdates.vue
   │  │  ├─ AsideUpdatesItem.vue
   │  │  ├─ CardComponent.vue
   │  │  ├─ CardScrollable.vue
   │  │  ├─ CardToolbar.vue
   │  │  ├─ CardWidget.vue
   │  │  ├─ Charts
   │  │  │  ├─ LineChart.vue
   │  │  │  └─ chart.config.js
   │  │  ├─ CheckboxRadioPicker.vue
   │  │  ├─ ClientsTableSample.vue
   │  │  ├─ ConfigBox.vue
   │  │  ├─ ErrorContent.vue
   │  │  ├─ FilePicker.vue
   │  │  ├─ FilePickerDragAndDrop.vue
   │  │  ├─ FooterBar.vue
   │  │  ├─ GrowingNumber.vue
   │  │  ├─ HeroBar.vue
   │  │  ├─ HeroBarMain.vue
   │  │  ├─ MediaItem.vue
   │  │  ├─ ModalBox.vue
   │  │  ├─ NavBar.vue
   │  │  ├─ NavBarMenu.vue
   │  │  ├─ Notification.vue
   │  │  ├─ Overlay.vue
   │  │  ├─ PasswordUpdateForm.vue
   │  │  ├─ ProfileUpdateForm.vue
   │  │  ├─ RefreshButton.vue
   │  │  ├─ Tiles.vue
   │  │  ├─ TitleBar.vue
   │  │  └─ UserAvatar.vue
   │  ├─ main.js
   │  ├─ menu.js
   │  ├─ router
   │  │  └─ index.js
   │  ├─ scss
   │  │  ├─ _app.scss
   │  │  ├─ _aside.scss
   │  │  ├─ _card.scss
   │  │  ├─ _config-box.scss
   │  │  ├─ _container.scss
   │  │  ├─ _dark-mode.scss
   │  │  ├─ _error-page.scss
   │  │  ├─ _footer.scss
   │  │  ├─ _form-addons.scss
   │  │  ├─ _form-b-slider.scss
   │  │  ├─ _form.scss
   │  │  ├─ _hero-bar.scss
   │  │  ├─ _iframe-preview.scss
   │  │  ├─ _main-section.scss
   │  │  ├─ _media-item.scss
   │  │  ├─ _misc.scss
   │  │  ├─ _mixins.scss
   │  │  ├─ _modal.scss
   │  │  ├─ _nav-bar.scss
   │  │  ├─ _overlay.scss
   │  │  ├─ _table.scss
   │  │  ├─ _theme-default.scss
   │  │  ├─ _theme-light-dark.scss
   │  │  ├─ _tiles.scss
   │  │  ├─ _title-bar.scss
   │  │  ├─ libs
   │  │  │  ├─ _all.scss
   │  │  │  └─ _spinkit.scss
   │  │  ├─ style-default.scss
   │  │  └─ style-light-dark.scss
   │  ├─ store
   │  │  └─ index.js
   │  └─ views
   │     ├─ ClientForm.vue
   │     ├─ Forms.vue
   │     ├─ FullPage.vue
   │     ├─ Home.vue
   │     ├─ Profile.vue
   │     ├─ Tables.vue
   │     └─ full-page
   │        ├─ Error.vue
   │        ├─ LockScreen.vue
   │        ├─ Login.vue
   │        └─ PasswordRecovery.vue
   ├─ vite.config.js
   └─ vue.config.js

HTML version

Package structure for Vanilla HTML/Scss version

└─ admin-one-bulma-dashboard-premium
├─ .editorconfig
├─ README.md
├─ demo
│  ├─ css
│  │  ├─ main.min.css
│  │  ├─ style-default.min.css
│  │  └─ style-light-dark.min.css
│  ├─ error-v1.html
│  ├─ error-v2.html
│  ├─ forms.html
│  ├─ img
│  │  ├─ justboil-logo.svg
│  │  └─ [email protected]
│  ├─ index.html
│  ├─ js
│  │  ├─ chart.sample.js
│  │  ├─ chart.sample.min.js
│  │  ├─ lock-screen.sample.js
│  │  ├─ lock-screen.sample.min.js
│  │  ├─ main.js
│  │  ├─ main.min.js
│  │  ├─ perfect-scrollbar.common.js
│  │  ├─ perfect-scrollbar.common.js.map
│  │  ├─ perfect-scrollbar.esm.js
│  │  ├─ perfect-scrollbar.esm.js.map
│  │  ├─ perfect-scrollbar.js
│  │  ├─ perfect-scrollbar.js.map
│  │  ├─ perfect-scrollbar.min.js
│  │  └─ perfect-scrollbar.min.js.map
│  ├─ lock-screen.html
│  ├─ login.html
│  ├─ password-recovery.html
│  ├─ profile.html
│  └─ tables.html
├─ gulpfile.js
├─ package-lock.json
├─ package.json
└─ src
├─ html
│  ├─ error-v1.html
│  ├─ error-v2.html
│  ├─ forms.html
│  ├─ index.html
│  ├─ lock-screen.html
│  ├─ login.html
│  ├─ parts
│  │  ├─ app-close.html
│  │  ├─ app-open.html
│  │  ├─ aside-right.html
│  │  ├─ aside.html
│  │  ├─ bottom-scripts-home.html
│  │  ├─ bottom-scripts-lock-screen.html
│  │  ├─ bottom-scripts.html
│  │  ├─ bottom.html
│  │  ├─ config-box.html
│  │  ├─ footer.html
│  │  ├─ head.html
│  │  ├─ hero-bar-sub.html
│  │  ├─ navbar.html
│  │  ├─ sample-modal.html
│  │  ├─ title-bar.html
│  │  └─ ui-overlay.html
│  ├─ password-recovery.html
│  ├─ profile.html
│  └─ tables.html
├─ img
│  ├─ justboil-logo.svg
│  └─ [email protected]
├─ js
│  ├─ chart.sample.js
│  ├─ lock-screen.sample.js
│  └─ main.js
└─ scss
├─ _aside.scss
├─ _card.scss
├─ _config-box.scss
├─ _container.scss
├─ _dark-mode.scss
├─ _error-page.scss
├─ _footer.scss
├─ _form-addons.scss
├─ _form-b-slider.scss
├─ _form.scss
├─ _hero-bar-main.scss
├─ _hero-bar.scss
├─ _iframe-preview.scss
├─ _main-section.scss
├─ _media-item.scss
├─ _misc.scss
├─ _mixins.scss
├─ _modal.scss
├─ _nav-bar.scss
├─ _overlay.scss
├─ _table.scss
├─ _theme-default.scss
├─ _theme-light-dark.scss
├─ _tiles.scss
├─ _title-bar.scss
├─ libs
│  ├─ _all.scss
│  ├─ _perfect-scrollbar-customize.scss
│  └─ _spinkit.scss
├─ style-default.scss
└─ style-light-dark.scss