https://github.com/kingyue737/vitify-next

🖖 Vite + Vuetify 3, Opinionated Admin Starter Template
https://github.com/kingyue737/vitify-next

admin admin-template dashboard template typescript vite vite-starter vue vuetify

Last synced: 2 months ago
JSON representation

🖖 Vite + Vuetify 3, Opinionated Admin Starter Template

• Host: GitHub
• URL: https://github.com/kingyue737/vitify-next
• Owner: kingyue737
• License: mit
• Created: 2023-03-06T06:06:50.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-17T03:25:31.000Z (3 months ago)
• Last Synced: 2024-10-19T05:51:52.210Z (3 months ago)
• Topics: admin, admin-template, dashboard, template, typescript, vite, vite-starter, vue, vuetify
• Language: Vue
• Homepage: https://vitify-next.netlify.app/
• Size: 2.08 MB
• Stars: 63
• Watchers: 6
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - Vitify - Lightweight admin template   (🙌 Projects using Vuetify <a name="projects"></a> / Vuetify 3)

README

        


  



Vitify Admin




  

    

  

  

    

  

  

    

  





Vite + Vuetify, Opinionated Admin Starter Template







Live Demo



Lightweight Vue 3 version of Vitify Admin





## Variants

- [vitify-nuxt](https://github.com/kingyue737/vitify-nuxt) - Vuetify 3 with Nuxt 3, the best DX 🔥🔥🔥

- [vitify-electron](https://github.com/kingyue737/vitify-electron) - Vuetify 3 with Electron

- [vitify-admin](https://github.com/kingyue737/vitify-admin) - Vuetify 2 but with full Typescript support and Vite

## Features

- ⚡️ [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness

- 🗂️ [File based routing](./src/pages)

- 📑 [Layout system](./src/layouts)

- 🍍 [State Management via Pinia](https://pinia.vuejs.org/)

- 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly

- ☁️ Deploy on [Netlify](https://www.netlify.com/), zero-config

- 🧪 Unit/Component Testing with [Vitest](https://github.com/vitest-dev/vitest) + [Testing Library](https://github.com/testing-library/vue-testing-library), E2E Testing with [Playwright](https://playwright.dev/) on [GitHub Actions](https://github.com/features/actions)




### Admin Starter Template

- 🪟 Default layout with drawer, header and footer

- 🧭 Auto generated navigation drawer and breadcrumbs based on routes

- 🔔 Notification store

- 📉 Data visualization with [vue-echarts](https://github.com/ecomfe/vue-echarts)

- 🎨 Theme color customization and dark mode

- 📱 Responsive layout

## Dropped Features from [Vitify](https://github.com/kingyue737/vitify-admin)

Currently I want to keep this template as light as possible, see [Vitify Admin](https://github.com/kingyue737/vitify-admin) of Vue 2 version for full featureset.

- ~~I18n~~

- ~~Browsers Compability~~

- ~~Mock API~~

- ~~Login Page~~

- ~~axios~~

## Pre-packed

### UI Frameworks

- [Vuetify 3](https://vuetifyjs.com/) - Material Design Framework

### Plugins

- [Vue Router](https://github.com/vuejs/router)

  - [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) - Next-gen file based typed routing for vue router

  - [`vite-plugin-vue-meta-layouts`](https://github.com/dishait/vite-plugin-vue-meta-layouts) - Layouts for pages

- [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the Composition API

- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - Auto import Vuetify 2 components

- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing

- [VueUse](https://github.com/antfu/vueuse) - Collection of useful composition APIs

- [`rollup-plugin-regexp`](https://github.com/kingyue737/rollup-plugin-regexp) - auto replace [`@mdi/font`](https://github.com/Templarian/MaterialDesign-Webfont) with [`@mdi/js`](https://github.com/Templarian/MaterialDesign-JS) in ``, reduce bundle size

### Coding Style

- [Prettier](https://prettier.io/), single quotes, no semi

- [ESLint flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new) with adapted [@nuxt/eslint](https://github.com/nuxt/eslint), future-proof

### Dev tools

- [TypeScript](https://www.typescriptlang.org/)

- [Vitest](https://github.com/vitest-dev/vitest) - Unit testing powered by Vite

- [pnpm](https://pnpm.js.org/) - Fast, disk space efficient package manager

- [Netlify](https://www.netlify.com/) - zero-config deployment

- [VS Code Extensions](./.vscode/extensions.json)

  - [Playwright](https://playwright.dev/docs/getting-started-vscode) - E2E testing

  - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - TypeScript support inside Vue SFCs

  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Find and fix problems in your code

  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatter

  - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

  - [Material Design Icons Intellisense](https://marketplace.visualstudio.com/items?itemName=lukas-tr.materialdesignicons-intellisense)

## Try it now!

### GitHub Template

[Create a repo from this template on GitHub](https://github.com/kingyue737/vitify-next/generate).

### Clone to local

If you prefer to do it manually with the cleaner git history

```bash

npx degit kingyue737/vitify-next my-vitify-app

cd my-vitify-app

pnpm i

```