← 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",
  "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.7",
    "@mdi/js": "^7.0.96",
    "axios": "^0.27.0",
    "chart.js": "^3.6.0",
    "numeral": "^2.0.6",
    "pinia": "^2.0.13",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@tailwindcss/forms": "^0.5.1",
    "@tailwindcss/line-clamp": "^0.4.0",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/eslint-config-prettier": "^7.0.0",
    "autoprefixer": "^10.2.6",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^9.0.0",
    "postcss": "^8.3.0",
    "postcss-import": "^14.0.2",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.0.14",
    "vite": "^3.0.9"
  }
}

File structure

└─ one-vue-tailwind-premium
   ├─ .browserslistrc
   ├─ .editorconfig
   ├─ .eslintrc.cjs
   ├─ .prettierrc.json
   ├─ .vscode
   │  └─ extensions.json
   ├─ LICENSE
   ├─ 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
   │  ├─ assets
   │  │  └─ svg
   │  │     ├─ mc-dark-bg.svg
   │  │     ├─ mc-light-bg.svg
   │  │     └─ visa-blue.svg
   │  ├─ colors.js
   │  ├─ colorsPremium.js
   │  ├─ components
   │  │  ├─ AsideMenu.vue
   │  │  ├─ AsideMenuItem.vue
   │  │  ├─ AsideMenuLayer.vue
   │  │  ├─ AsideMenuList.vue
   │  │  ├─ BaseButton.vue
   │  │  ├─ BaseButtons.vue
   │  │  ├─ BaseDivider.vue
   │  │  ├─ BaseIcon.vue
   │  │  ├─ BaseLevel.vue
   │  │  ├─ CardBox.vue
   │  │  ├─ CardBoxClient.vue
   │  │  ├─ CardBoxComponentBody.vue
   │  │  ├─ CardBoxComponentEmpty.vue
   │  │  ├─ CardBoxComponentFooter.vue
   │  │  ├─ CardBoxComponentHeader.vue
   │  │  ├─ CardBoxComponentTitle.vue
   │  │  ├─ CardBoxModal.vue
   │  │  ├─ CardBoxTransaction.vue
   │  │  ├─ CardBoxWidget.vue
   │  │  ├─ Charts
   │  │  │  ├─ LineChart.vue
   │  │  │  └─ chart.config.js
   │  │  ├─ FooterBar.vue
   │  │  ├─ FormCheckRadio.vue
   │  │  ├─ FormCheckRadioGroup.vue
   │  │  ├─ FormControl.vue
   │  │  ├─ FormControlIcon.vue
   │  │  ├─ FormField.vue
   │  │  ├─ FormFilePicker.vue
   │  │  ├─ IconRounded.vue
   │  │  ├─ JustboilLogo.vue
   │  │  ├─ NavBar.vue
   │  │  ├─ NavBarItem.vue
   │  │  ├─ NavBarItemPlain.vue
   │  │  ├─ NavBarMenuList.vue
   │  │  ├─ NotificationBar.vue
   │  │  ├─ NotificationBarInCard.vue
   │  │  ├─ NumberDynamic.vue
   │  │  ├─ OverlayLayer.vue
   │  │  ├─ PillTag.vue
   │  │  ├─ PillTagPlain.vue
   │  │  ├─ PillTagTrend.vue
   │  │  ├─ Premium
   │  │  │  ├─ AsideMenu.vue
   │  │  │  ├─ AsideMenuItem.vue
   │  │  │  ├─ AsideMenuLayer.vue
   │  │  │  ├─ AsideMenuList.vue
   │  │  │  ├─ ButtonMenu.vue
   │  │  │  ├─ ButtonTextLink.vue
   │  │  │  ├─ CardBoxAmountItem.vue
   │  │  │  ├─ CardBoxBillingItem.vue
   │  │  │  ├─ CardBoxModalForm.vue
   │  │  │  ├─ CardBoxPaymentMethod.vue
   │  │  │  ├─ CardBoxPricing.vue
   │  │  │  ├─ CardBoxProduct.vue
   │  │  │  ├─ CreditCardLogo.vue
   │  │  │  ├─ FormControl.vue
   │  │  │  ├─ FormControlIcon.vue
   │  │  │  ├─ FormControlListbox.vue
   │  │  │  ├─ FormField.vue
   │  │  │  ├─ FormFieldHelp.vue
   │  │  │  ├─ SectionBannerProfile.vue
   │  │  │  ├─ SectionFormScreen.vue
   │  │  │  ├─ SnackBar.vue
   │  │  │  ├─ SnackBarItem.vue
   │  │  │  ├─ TipTag.vue
   │  │  │  ├─ UpdateMark.vue
   │  │  │  ├─ UserAvatarCurrentUserWithUpload.vue
   │  │  │  ├─ UserCard.vue
   │  │  │  └─ UserCardProfileNumber.vue
   │  │  ├─ SectionBanner.vue
   │  │  ├─ SectionBannerStarOnGitHub.vue
   │  │  ├─ SectionFullScreen.vue
   │  │  ├─ SectionMain.vue
   │  │  ├─ SectionTitle.vue
   │  │  ├─ SectionTitleLineWithButton.vue
   │  │  ├─ TableCheckboxCell.vue
   │  │  ├─ TableSampleClients.vue
   │  │  ├─ UserAvatar.vue
   │  │  ├─ UserAvatarCurrentUser.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
   │  ├─ menuAside.js
   │  ├─ menuNavBar.js
   │  ├─ router
   │  │  └─ index.js
   │  ├─ sampleButtonMenuOptions.js
   │  ├─ stores
   │  │  ├─ layout.js
   │  │  ├─ main.js
   │  │  ├─ snackBar.js
   │  │  └─ style.js
   │  ├─ styles.js
   │  └─ views
   │     ├─ ErrorView.vue
   │     ├─ FormsView.vue
   │     ├─ HomeView.vue
   │     ├─ LoginView.vue
   │     ├─ Premium
   │     │  ├─ FormsView.vue
   │     │  ├─ HomeView.vue
   │     │  ├─ LoginView.vue
   │     │  ├─ PricingView.vue
   │     │  ├─ ProfileView.vue
   │     │  ├─ RemindView.vue
   │     │  ├─ SignupView.vue
   │     │  ├─ StyleView.vue
   │     │  ├─ TablesListsView.vue
   │     │  └─ UiView.vue
   │     ├─ ProfileView.vue
   │     ├─ ResponsiveView.vue
   │     ├─ StyleView.vue
   │     ├─ TablesView.vue
   │     └─ UiView.vue
   ├─ tailwind.config.js
   └─ vite.config.js