← Back to template page

Admin One Tailwind Vue 3

Vue 3.x Tailwind 3.x dashboard template with dark mode

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

package.json

{
  "name": "admin-one-vue-tailwind-premium",
  "version": "3.1.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",
    "@types/tailwindcss": "^3.0.10",
    "@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
   │  │  ├─ _app.css
   │  │  ├─ _checkbox-radio-switch.css
   │  │  ├─ _progress.css
   │  │  ├─ _scrollbars.css
   │  │  ├─ _table.css
   │  │  ├─ main.css
   │  │  └─ tailwind
   │  │     ├─ _base.css
   │  │     ├─ _components.css
   │  │     └─ _utilities.css
   │  ├─ 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