Repository files navigation

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

• 🦾 FullTypeScript Support and intellisense forVuetify 2 components, powered byVolar

• 🖖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 onNetlify, zero-config

• 🧪 Unit/Component Testing withVitest +Testing Library, E2E Testing withCypress onGitHub 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 withMock Service Worker

• 🔔 Notification store

• 🧑‍💼 Route authority based on user role

• 📉 Data visualization withvue-echarts

• 🔗 Communicate with backend with REST API powered byaxios

• 🎨 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 Vuetifyv-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 onbrowserslist

• 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-appcd my-vitify-apppnpm i

Vitify Admin requirespnpm patch for bug fixing in dependencies before maintainers release them. If you are usingyarn, you can useyarn patch. Fornpm users,patch-package is required asnpm has no built-in patching functionality.

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

• Change the author name inLICENSE
• Change the title inindex.html, navigation drawer and login page
• Change the hostname invite.config.ts
• Change the favicon inpublic
• Clean up theREADME and remove routes
• Change the copyright in navigation drawer and login page
• Change default locale ofvue-i18n
• Change or removeCypress Cloud related ID inci.yml

And, enjoy :)

Just run and visithttp://localhost:9527

pnpm dev

To build the App, run

pnpm build

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

pnpm typecheck

pnpm test:unit

For E2E test, you need to build the project first

pnpm buildpnpm test:e2e

Go toCypress Cloud, create a new project and add itsprojectId as${CYPRESS_PROJECT_ID}, itsrecord 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, removerecord: true and the entireenv block from.github/workflows/ci.yml:

-name:Cypressuses:cypress-io/github-action@v4with:install-command:echobuild:pnpm run buildstart:pnpm run previewrecord:truecommand-prefix:'--'env:# pass the Dashboard record key as an environment variableCYPRESS_RECORD_KEY:${{ secrets.CYPRESS_RECORD_KEY }}# pass GitHub token to allow accurately detecting a build vs a re-run buildGITHUB_TOKEN:${{ secrets.GITHUB_TOKEN }}# pass the project ID from the secrets through environment variableCYPRESS_PROJECT_ID:${{ secrets.CYPRESS_PROJECT_ID }}

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

Thedocumentation of this template is powered byVitePress andDocSearch

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

Inspired byvitesse andvue-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 along 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.