← 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",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@headlessui/vue": "^1.6.7",
    "@mdi/js": "^7.0.96",
    "axios": "^1.5.0",
    "chart.js": "^4.4.0",
    "numeral": "^2.0.6",
    "pinia": "^2.1.6",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@tailwindcss/forms": "^0.5.6",
    "@vitejs/plugin-vue": "^4.3.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "autoprefixer": "^10.4.15",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "postcss": "^8.4.30",
    "postcss-import": "^15.1.0",
    "prettier": "^3.0.3",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.9"
  }
}

File structure

└─ one-vue-tailwind-premium
   ├─ .browserslistrc
   ├─ .editorconfig
   ├─ .eslintrc.cjs
   ├─ .laravel-guide
   │  ├─ README.md
   │  └─ resources
   │     └─ js
   │        ├─ Pages
   │        │  └─ Auth
   │        │     ├─ ConfirmPassword.vue
   │        │     ├─ ForgotPassword.vue
   │        │     ├─ Login.vue
   │        │     ├─ Register.vue
   │        │     ├─ ResetPassword.vue
   │        │     ├─ TwoFactorChallenge.vue
   │        │     └─ VerifyEmail.vue
   │        ├─ app.js
   │        └─ components
   │           └─ FormValidationErrors.vue
   ├─ .nuxt-guide
   │  └─ README.md
   ├─ .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
   │  │  │  ├─ 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
   │  │  ├─ styles
   │  │  │  ├─ _basic.css
   │  │  │  ├─ _blue.css
   │  │  │  ├─ _cyan.css
   │  │  │  ├─ _emerald.css
   │  │  │  ├─ _fuchsia.css
   │  │  │  ├─ _indigo.css
   │  │  │  ├─ _neutral.css
   │  │  │  ├─ _pink.css
   │  │  │  ├─ _purple.css
   │  │  │  ├─ _rose.css
   │  │  │  ├─ _sky.css
   │  │  │  ├─ _slate.css
   │  │  │  ├─ _stone.css
   │  │  │  ├─ _teal.css
   │  │  │  ├─ _violet.css
   │  │  │  ├─ _white.css
   │  │  │  └─ _zinc.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
   │  │  ├─ darkMode.js
   │  │  ├─ layout.js
   │  │  ├─ main.js
   │  │  └─ snackBar.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