Vitify Admin

Vite + Vuetify, Opinionated Admin Starter Template

Live Demo

Lightweight Vue 3 version of Vitify Admin

Variants

• vitify-nuxt - Vuetify 3 with Nuxt 3, the best DX 🔥🔥🔥

• vitify-electron - Vuetify 3 with Electron

• vitify-admin - Vuetify 2 but with full Typescript support and Vite

Features

• ⚡️ Vite 4, pnpm, ESBuild - born with fastness

• 🗂️ File based routing

• 📑 Layout system

• 🍍 State Management via Pinia

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

• ☁️ Deploy on Netlify, zero-config

• 🧪 Unit/Component Testing with Vitest + Testing Library, E2E Testing with Playwright on GitHub Actions

Admin Starter Template

• 🪟 Default layout with drawer, header and footer

• 🧭 Auto generated navigation drawer and breadcrumbs based on routes

• 🔔 Notification store

• 📉 Data visualization with vue-echarts

• 🎨 Theme color customization and dark mode

• 📱 Responsive layout

Dropped Features from Vitify

Currently I want to keep this template as light as possible, see Vitify Admin of Vue 2 version for full featureset.

• I18n
• Browsers Compability
• Mock API
• Login Page
• axios

Pre-packed

UI Frameworks

• Vuetify 3 - Material Design Framework

Plugins

• Vue Router
  • unplugin-vue-router - Next-gen file based typed routing for vue router
  • vite-plugin-vue-layouts - Layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the Composition API
• unplugin-vue-components - Auto import Vuetify 2 components
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• VueUse - Collection of useful composition APIs
• vite-svg-loader - SVG files are loaded as Vue components, optimised via SVGO and auto registered as Vuetify v-icons

Coding Style

• Prettier, single quotes, no semi
• ESLint with adapted @vue/eslint-config-typescript

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• pnpm - Fast, disk space efficient package manager
• Netlify - zero-config deployment
• VS Code Extensions
  • Playwright - E2E testing
  • Volar - TypeScript support inside Vue SFCs
  • ESLint - Find and fix problems in your code
  • Prettier - Code formatter
  • EditorConfig for VS Code
  • Material Design Icons Intellisense

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit kingyue737/vitify-next my-vitify-app
cd my-vitify-app
pnpm i