Skip to content

πŸ–– Vite + Vuetify 2, Opinionated Admin Starter Template

License

Notifications You must be signed in to change notification settings

NuStar-Nuclear/vitify-admin

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Vitify - Opinionated Vuetify Admin Starter Template

Vitify Admin

vue vuetify license

Vite + Vuetify, Opinionated Admin Starter Template

Live Demo

Documentation

Features


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

Plugins

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

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

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

About

πŸ–– Vite + Vuetify 2, Opinionated Admin Starter Template

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 53.1%
  • TypeScript 31.1%
  • JavaScript 11.8%
  • SCSS 3.6%
  • Other 0.4%