Awesome

<img alt="Vitify - Opinionated Vuetify Admin Starter Template" src="public/favicon.svg" width=200px/> <h1 align="center">Vitify Admin</h1> <a href="https://github.com/vuejs/vue"> <img src="https://img.shields.io/badge/vue-3-brightgreen.svg" alt="vue"> </a> <a href="https://github.com/vuetifyjs/vuetify"> <img src="https://img.shields.io/badge/vuetify-3-blue.svg" alt="vuetify"> </a> <a href="https://github.com/kingyue737/vitify-admin/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> </a> Vite + Vuetify, Opinionated Admin Starter Template <a href="https://vitify-next.netlify.app/">Live Demo </a> Lightweight Vue 3 version of <a href="https://github.com/kingyue737/vitify-admin">Vitify Admin </a>

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, 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-meta-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
rollup-plugin-regexp - auto replace @mdi/font with @mdi/js in <VIcon>, reduce bundle size

Coding Style

Prettier, single quotes, no semi
ESLint flat config with adapted @nuxt/eslint, future-proof

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