search

kingyue737 / vitify-admin

🖖 Vite + Vuetify, Opinionated Admin Starter Template
https://vitify-admin.netlify.app/
MIT License
149 stars 14 forks source link
admin admin-template dashboard template typescript vite vite-starter vue vue-template vuetify

readme

Vitify - Opinionated Vuetify Admin Starter Template

Vitify Admin

vue vuetify license

Vite + Vuetify, Opinionated Admin Starter Template

Live Demo

 Documentation

Variants

Features


Admin Starter Template

Pre-packed

UI Frameworks

Plugins

Compatibility

Coding Style

Dev tools

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

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.