Vitify Admin

Vite + Vuetify, Opinionated Admin Starter Template

Live Demo

Documentation

Variants

vitify-next - Lightweight Vue 3 version of this template
vitify-electron - Vuetify 3 + Electron starter

Features

🦾 Full TypeScript Support and intellisense for Vuetify 2 components, powered by Volar
🖖 Vue 2.7 - Composition API and <script setup>
⚡️ Vite 4, pnpm, ESBuild - born with fastness
🗂️ File based routing
📑 Layout system
🍍 State Management via Pinia
🌍 I18n ready
📥 APIs auto importing - use Composition API and others directly
☁️ Deploy on Netlify, zero-config
🧪 Unit/Component Testing with Vitest + Testing Library, E2E Testing with Cypress on GitHub Actions

Admin Starter Template

🪟 Layout with drawer, header, footer(status bar) and login page
🧭 Auto generated navigation drawer and breadcrumbs based on routes
🤡 Mock API in dev and testing with Mock Service Worker
🔔 Notification store
🧑‍💼 Route authority based on user role
📉 Data visualization with vue-echarts
🔗 Communicate with backend with REST API powered by axios
🎨 Theme color customization and dark mode
📱 Responsive layout

Pre-packed

UI Frameworks

Vuetify 2 - Material Design Framework

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 - Auto import Vuetify 2 components
unplugin-auto-import - Directly use Vue Composition API and others without importing
PortalVue - Use <Teleport> of Vue 3 in Vue 2
Vue I18n - Internationalization
- vue-i18n-bridge - Backport Composition API and message format syntax to Vue 2
- unplugin-vue-i18n - Prebundle Vue I18n messages and support SFC i18n custom block
VueUse - Collection of useful composition APIs
Mock Service Worker - Seamless REST/GraphQL API mocking library for browser and Node.js
vite-plugin-vue2-svg - Load SVG files as Vue components, and auto register as Vuetify v-icons
volar-plugin-vue-router - Intellisense in <route> custom block

Compatibility

@vitejs/plugin-legacy - Generate polyfills with @babel/preset-env in production bundle
postcss-preset-env - Convert modern CSS into what most browsers understand, determining polyfills based on browserslist

Coding Style

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

Dev tools

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

Try it now!

Vitify Admin requires Node >=16.6.0

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-admin my-vitify-app
cd my-vitify-app
pnpm i

Vitify Admin requires pnpm patch for bug fixing in dependencies before maintainers release them. If you are using yarn, you can use yarn patch. For npm users, patch-package is required as npm has no built-in patching functionality.

Checklist

When you use this template, try follow the checklist to update your info properly

Change the author name in LICENSE
Change the title in index.html, navigation drawer and login page
Change the hostname in vite.config.ts
Change the favicon in public
Clean up the README and remove routes
Change the copyright in navigation drawer and login page
Change default locale of vue-i18n
Change or remove Cypress Cloud related ID in ci.yml

And, enjoy :)

Usage

Development

Just run and visit http://localhost:9527

pnpm dev

Build

To build the App, run

pnpm build

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

Type Check

pnpm typecheck

Testing

pnpm test:unit

For E2E test, you need to build the project first

pnpm build
pnpm test:e2e

Record on Cypress Cloud

Go to Cypress Cloud, create a new project and add its projectId as ${CYPRESS_PROJECT_ID}, its record key as $CYPRESS_RECORD_KEY in your repositry secrets (https://github.com/your-name/project-name/settings/secrets/actions).

If you don't want to use Cypress Cloud, remove record: true and the entire env block from .github/workflows/ci.yml:

- name: Cypress
  uses: cypress-io/github-action@v4
  with:
    install-command: echo
    build: pnpm run build
    start: pnpm run preview
    record: true
    command-prefix: '--'
  env:
    # pass the Dashboard record key as an environment variable
    CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
    # pass GitHub token to allow accurately detecting a build vs a re-run build
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    # pass the project ID from the secrets through environment variable
    CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}

Deploy on Netlify

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

Documentation

The documentation of this template is powered by VitePress and DocSearch

Repo: https://github.com/kingyue737/vitify-docs

Acknowledgement

Inspired by vitesse and vue-element-admin 💖. Thanks for every developer for making frontend community better.

I made this starter template for promptly scaffolding admin projects of my company, along with some good practices I've learned during making these apps.

Currently, plenty of awesome Vue 2 librarys have not migrated to Vue 3 ecosystem, maybe never 😭. There is still a long way to go before Vuetify 3 includes all the features of Vuetify 2. So I struggle with bridging perfect DX of Vue 3 to my Vuetify 2 projects. It's strongly opinionated, but hope it can help you to avoid detours.

Don't hesitate to open an issue or a discussion if you meet any problem.

klngrs/vitify-admin