Vite + Vuetify, Opinionated Admin Starter Template

Live Demo

Documentation

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

• vitify-next - Lightweight Vue 3 version of this template

• vitify-electron - Vuetify 3 + Electron starter

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

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

• ⚡️ Vite, 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

• 🪟 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

• Vuetify 2 - Material Design Framework

• 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

• @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

• Prettier, single quotes, no semi
• ESLint with Flat Config

• 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

Vitify Admin requires Node >=16.6.0

Create a repo from this template on GitHub.

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.

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 :)

Just run and visit http://localhost:9527

pnpm dev

To build the App, run

pnpm build

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

pnpm typecheck

pnpm test:unit

For E2E test, you need to build the project first

pnpm build
pnpm test:e2e

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

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

The documentation of this template is powered by VitePress and DocSearch

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

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.