VoVAllen / envd-dashboard-ui

Dashboard of envd

---

Features

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild - born with fastness

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 📑 Layout system

• 🎨 TailwindCSS

• 😃 Use icons from any icon sets with auto importing

• 🔎 Component Preview

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing - use Composition API and others directly

• 🖨 Static-site generation (SSG) via vite-ssg

• 🦔 Critical CSS via critters

• 🦾 TypeScript, of course

• ⚙️ Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions

---

Usage

Setup

Run pnpm i

Development

Visit http://localhost:3333 to view the project

pnpm open # To open automatically
pnpm dev # To run the dev server

Update Dependencies

pnpm dep # Runs Taze to update Major and Minor dependencies

Build

To build your App, run

pnpm build # Build for Production
pnpm tbuild # Lint and Typecheck before building

And you will see the generated file in dist that are ready to be served.

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

---

Pre-packed

UI Frameworks

• TailwindCSS
  • @TailwindCSS/Aspect-Ratio
  • @TailwindCSS/Typography
• TailwindCSS-Scrollbar
• DaisyUI - Easily change to whatever component library you want
• Theme-Change - Fast CSS Theme changing

Icons

• Iconify - use icons from any icon sets
  • 🔍Icônes - Find Icons here
• Auto Importing Icons

Plugins

• Vue Router
  • vite-plugin-pages - file system based routing
  • vite-plugin-vue-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• unplugin-icons - Auto import Icons from any set
• vite-plugin-pwa - PWA
• vite-plugin-vue-component-preview - Preview single component in VSCode
• VueUse - collection of useful composition APIs
• vite-ssg-sitemap - Sitemap generator
• @vueuse/head - manipulate document head reactively

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• Cypress - E2E testing
• pnpm - fast, disk space efficient package manager
• vite-ssg - Static-site generation
  • critters - Critical CSS
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • ESLint
  • TailwindCSS IntelliSense