Admin One - Vue.js 3 Tailwind 3 dashboard template with dark mode

Premium

Admin One

Tailwind Vue 3

Vue 3.x Tailwind 3.x dashboard template with dark mode
Vite or Nuxt or Laravel

Tailwind 3.x
Vue 3.x
Vite
Composition API
Dark mode

Multiple colors

Light and dark modes included

Admin One - Vue.js 3 Tailwind 3 dashboard template with dark mode
Admin One - Vue.js 3 Tailwind 3 dashboard template with dark mode
Admin One - Vue.js 3 Tailwind 3 dashboard template with dark mode
+15 More…

About

Vue.js 3.x Tailwind 3.x admin dashboard template with dark mode. Vite or Nuxt 3.x or Laravel 9.x

  • Built with Vue.js 3.x, TailwindCSS 3.x framework & Composition API
  • Vite under the hood
  • Nuxt 3.x integration available Guide
  • Laravel 9.x Breeze Inertia Vue integration available Guide
  • SFC <script setup> Info
  • Pinia state library (official Vuex 5)
  • Dark mode
  • Styled scrollbars
  • SPA with Router
  • Production CSS is only 40kb (or 75kb when compiled with all color variations)
  • Reusable components

Updated on July 27, 2022

Package.json

{
  "name": "admin-one-vue-tailwind-premium",
  "version": "3.2.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@headlessui/vue": "^1.6.5",
    "@mdi/js": "^6.7.96",
    "axios": "^0.27.2",
    "chart.js": "^3.8.0",
    "numeral": "^2.0.6",
    "pinia": "^2.0.14",
    "vue": "^3.2.37",
    "vue-router": "^4.0.16"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/line-clamp": "^0.4.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.18.0",
    "eslint-plugin-vue": "^9.1.1",
    "postcss": "^8.4.14",
    "postcss-import": "^14.1.0",
    "tailwindcss": "^3.1.4",
    "vite": "^2.9.12"
  }
}

File structure

└─ admin-one-vue-tailwind-premium
   ├─ .browserslistrc
   ├─ .editorconfig
   ├─ .eslintrc.cjs
   ├─ README.md
   ├─ index.html
   ├─ jsconfig.json
   ├─ package-lock.json
   ├─ package.json
   ├─ postcss.config.js
   ├─ public
   │  ├─ data-sources
   │  │  ├─ clients.json
   │  │  ├─ history.json
   │  │  ├─ products.json
   │  │  └─ updates.json
   │  └─ favicon.png
   ├─ src
   │  ├─ App.vue
   │  ├─ colors.js
   │  ├─ components
   │  │  ├─ AsideMenu.vue
   │  │  ├─ AsideMenuItem.vue
   │  │  ├─ AsideMenuList.vue
   │  │  ├─ AsideRight.vue
   │  │  ├─ AsideRightItem.vue
   │  │  ├─ BaseButton.vue
   │  │  ├─ BaseButtons.vue
   │  │  ├─ BaseDivider.vue
   │  │  ├─ BaseIcon.vue
   │  │  ├─ BaseLevel.vue
   │  │  ├─ ButtonMenu.vue
   │  │  ├─ ButtonTextLink.vue
   │  │  ├─ CardBox.vue
   │  │  ├─ CardBoxAmountItem.vue
   │  │  ├─ CardBoxClient.vue
   │  │  ├─ CardBoxModal.vue
   │  │  ├─ CardBoxPricing.vue
   │  │  ├─ CardBoxProduct.vue
   │  │  ├─ CardBoxTransaction.vue
   │  │  ├─ CardBoxWidget.vue
   │  │  ├─ CardBoxWidgetTrend.vue
   │  │  ├─ Charts
   │  │  │  ├─ LineChart.vue
   │  │  │  └─ chart.config.js
   │  │  ├─ FooterBar.vue
   │  │  ├─ FormCheckRadioPicker.vue
   │  │  ├─ FormControl.vue
   │  │  ├─ FormControlIcon.vue
   │  │  ├─ FormControlListbox.vue
   │  │  ├─ FormField.vue
   │  │  ├─ FormFieldHelp.vue
   │  │  ├─ FormFilePicker.vue
   │  │  ├─ IconRounded.vue
   │  │  ├─ IconUpdateMark.vue
   │  │  ├─ JustboilLogo.vue
   │  │  ├─ NavBar.vue
   │  │  ├─ NavBarItem.vue
   │  │  ├─ NavBarItemLabel.vue
   │  │  ├─ NavBarMenu.vue
   │  │  ├─ NavBarSearch.vue
   │  │  ├─ NotificationBar.vue
   │  │  ├─ NumberDynamic.vue
   │  │  ├─ OverlayLayer.vue
   │  │  ├─ PillTag.vue
   │  │  ├─ PillTagTrend.vue
   │  │  ├─ SectionBottomOtherPages.vue
   │  │  ├─ SectionFormScreen.vue
   │  │  ├─ SectionMain.vue
   │  │  ├─ SectionTitle.vue
   │  │  ├─ SectionTitleLineWithButton.vue
   │  │  ├─ SnackBar.vue
   │  │  ├─ SnackBarItem.vue
   │  │  ├─ StyleSwitcher.vue
   │  │  ├─ TableCheckboxCell.vue
   │  │  ├─ TableSampleClients.vue
   │  │  ├─ TipTag.vue
   │  │  ├─ UserAvatar.vue
   │  │  └─ UserCard.vue
   │  ├─ config.js
   │  ├─ css
   │  │  ├─ _checkbox-radio-switch.css
   │  │  ├─ _progress.css
   │  │  ├─ _scrollbars.css
   │  │  ├─ _table.css
   │  │  ├─ main.css
   │  │  └─ tailwind
   │  │     ├─ _base.css
   │  │     ├─ _components.css
   │  │     └─ _utilities.css
   │  ├─ layouts
   │  │  ├─ LayoutAuthenticated.vue
   │  │  └─ LayoutGuest.vue
   │  ├─ main.js
   │  ├─ menu.js
   │  ├─ router
   │  │  └─ index.js
   │  ├─ sampleButtonMenuOptions.js
   │  ├─ stores
   │  │  ├─ layout.js
   │  │  ├─ main.js
   │  │  └─ style.js
   │  ├─ styles.js
   │  └─ views
   │     ├─ ErrorView.vue
   │     ├─ FormsView.vue
   │     ├─ HomeView.vue
   │     ├─ LoginView.vue
   │     ├─ PricingView.vue
   │     ├─ ProfileView.vue
   │     ├─ RemindView.vue
   │     ├─ SignupView.vue
   │     ├─ StyleView.vue
   │     ├─ TablesListsView.vue
   │     └─ UiView.vue
   ├─ tailwind.config.js
   └─ vite.config.js

FAQ

Can I integrate this dashboard with backend of my choice?

Yes. You are free to use any backend with this dashboard.

Are your dashboards well-coded?

Feel free to check free admin dashboard version on GitHub

May I return the dashboard if I don't think I'm satisfied?

Yes, you can check a purchased item and request a refund within 24 hours (14 days on Extended license)

Can I buy Standard License and upgrade it to Extended later?

You can upgrade license whenever you want by just paying the difference.

Drop an email to [email protected]

What is the difference between free and premium dashboard versions?

Free items are simple dashboards with basic stuff. Premium versions are more advanced. Feel free to check the demos!

Do I have to keep your copyrights?

Free items are licensed under MIT, so you have to keep our copyrights. Premium items allow you to remove copyrights.

Can I use premium dashboard in an open-source project?

Yes, since you add our link to your Readme.md:

Built with JustBoil Admin One Tailwind Vue 3 - https://justboil.me/tailwind-admin-templates/vue-dashboard/

I'm not required to pay VAT

Please fill your VAT ID at the invoice page, after your purchase is complete.

In case of any questions, please drop an e-mail to [email protected].

We'll automatically refund the VAT amount paid.

Buy now

Admin One - Vue.js 3 Tailwind 3 dashboard template with dark mode

Updated on July 27, 2022

Free returns within 24 hours (14 days on Extended license)

Secure payment by Gumroad, Inc.

Free sample on GitHub

Get updates

when we add new
or update current templates