bit-admin

Simple admin dashboard with an interactive layout and a few components built with Vue3 and Tailwind (under construction).

JS Libraries used

• Vite is used as a dev server & build tool
• Vue Router is used for routing
• pinia is used for state management

CSS Libraries used

• tailwindcss for basic styling
• vue-toastification for basic notifications
• sass-loader for scss pre-processing
• @heroicons/vue for icons

File structure

In the 📁 src folder its where the fun happens:

• 📁 assets - mostly images
• 📁 router - routing files (extracted all routes in external routes.js file)
• 📁 scss - all SCSS styles (notifications overrides, tailwind, theme variables)
• 📁 scss - all SCSS styles (notifications overrides, tailwind, theme variables)
• 📁 store - Pinia store example with 1 module, layoutStore
• 📁 composabls - reusable composable example, useLogger()
• 📁 components
• 📄 App.vue - top-level layout
• 📄 main.js - application & plugins initialization

📁 components

• 📁 layout - layout components like Header, Sidebar, etc
• 📁 base - base UI components like Input, Select, Radio, Checkbox, Dropdown, Badge, etc

Screenshots

Reports page

Modal open

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Todo

• Add sass pre-preocessor
• Refacor styles
• Add .ts support
• Implement auth, middelwares, more views, etc