๐ Vite + Vuetify, Opinionated Admin Starter Template
Vite + Vuetify, Opinionated Admin Starter Template
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>
๐๏ธ File based routing
๐ Layout system
๐ 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
vite-plugin-pages
- File system based routingvite-plugin-vue-layouts
- Layouts for pagesunplugin-vue-components
- Auto import Vuetify 2 componentsunplugin-auto-import
- Directly use Vue Composition API and others without importing<Teleport>
of Vue 3 in Vue 2vue-i18n-bridge
- Backport Composition API and message format syntax to Vue 2unplugin-vue-i18n
- Prebundle Vue I18n messages and support SFC i18n custom blockvite-plugin-vue2-svg
- Load SVG files as Vue components, and auto register as Vuetify v-icon
svolar-plugin-vue-router
- Intellisense in <route>
custom block@vitejs/plugin-legacy
- Generate polyfills with @babel/preset-env
in production bundlepostcss-preset-env
- Convert modern CSS into what most browsers understand, determining polyfills based on browserslist
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 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
LICENSE
index.html
, navigation drawer and login pagevite.config.ts
public
README
and remove routesvue-i18n
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.