Vitify Admin

Vite + Vuetify, Opinionated Admin Starter Template

Live Demo

Documentation

Features

• 🦾 Full TypeScript Support and intellisense for Vuetify 2 components, powered by Volar

• 🖖 Vue 2.7 - Composition API and <script setup>

• ⚡️ Vite 3, 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
• vite-plugin-browserslist-useragent - Compile browserslist query to a RegExp to test browser useragent

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

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 Dashboard 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 Dashboard

Go to Cypress Dashboard, 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 Dashboard, 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 the release of version Vuetify v3.1 which includes all components 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.