Vitify NuStar

Vite + Vuetify, Opinionated Admin Starter Template
NuStar version of Vitify Admin

Live Demo

Documentation

Features

• 🦾 Full TypeScript Support and intellisense for Vuetify 2 components, powered by Volar

• 🖖 Vue 2.7 - Composition API and <script setup>

• ⚡️ Vite 3, 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

• 🧪 Unit/Component Testing with Vitest + Testing Library, E2E Testing with Cypress

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

• Vuetify 2 - Material Design Framework

Plugins

• 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 Vuetify v-icons

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

• Prettier, single quotes, no semi
• ESLint with adapted @vue/eslint-config-typescript

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• Cypress - E2E testing
• pnpm - Fast, disk space efficient package manager
• 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

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 NuStar-Nuclear/vitify-nustar 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

• Add suitable LICENSE
• Change the title in index.html, navigation drawer and login page
• Change the hostname in vite.config.ts
• Change the favicon in public
• Change default locale of vue-i18n

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

Acknowledgement

Inspired by vitesse and vue-element-admin 💖.

Maintainers

📧 Yue JIN

Copyright © 2022-PRESENT Shanghai NuStar Nuclear Power Technology Co., Ltd.