Awesome
<p align="center"> <img alt="Vitify - Opinionated Vuetify Admin Starter Template" src="public/vitify-nuxt.svg" width=100px/> </p> <h1 align="center">Vitify Nuxt</h1> <p align="center"> <a href="https://github.com/vuejs/vue"> <img src="https://img.shields.io/badge/nuxt-3-brightgreen.svg" alt="vue"> </a> <a href="https://github.com/vuetifyjs/vuetify"> <img src="https://img.shields.io/badge/vuetify-3-blue.svg" alt="vuetify"> </a> <a href="https://github.com/kingyue737/vitify-admin/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license"> </a> </p> <p align='center'> <b>Vuetify 3</b> + <b>Nuxt 3</b>, Opinionated Admin Starter Template<br><br> </p> <p align='center'> <a href="https://vitify-nuxt.netlify.app/">Live Demo<br><br></a> </p>Features
-
💚 Nuxt 3 - SPA, ESR, File-based routing, components auto importing, modules, etc
-
💥 SSR out of the box - powered by Vuetify Nuxt module
-
📥 APIs auto importing - for Composition API, VueUse and custom composables
-
☁️ Deploy on Netlify, zero-config
-
🦾 TypeScript 100%
-
🧪 Unit, Component and E2E Testing with @nuxt/test-utils
Admin Starter Template
-
🪟 Default layout with drawer, header and footer
-
🧭 Auto-generated navigation drawer and breadcrumbs based on routes
-
🔔 Notification store
-
📉 Data visualization with nuxt-echarts
-
🎨 Theme color customization and dark mode
-
📱 Responsive layout
-
🛡️ Authentication backed-in using nuxt-auth-utils
Variants
-
vitify-next - Lightweight Vue 3 version without Nuxt
-
vitify-electron - Vuetify 3 + Vite + Electron starter
-
vitify-admin - Vue 2.7 with i18n, browser compatibility and mock server
Pre-packed
Nuxt Modules
- Vuetify Nuxt Module - Zero-config Nuxt Module for Vuetify
- VueUse - Collection of useful composition APIs
- Pinia - Intuitive, type-safe, light and flexible Store for Vue
- Nuxt Icon - Icon module for Nuxt with 200,000+ ready to use icons from Iconify
- Nuxt ECharts - Nuxt module for Apache ECharts™
- Nuxt Auth Utils - Minimalist Authentication module for Nuxt
Coding Style
- Prettier, single quotes, no semi
- ESLint flat config with adapted @nuxt/eslint, future-proof
Dev tools
- TypeScript
- pnpm - Fast, disk space efficient package manager
- Netlify - zero-config deployment
- VS Code Extensions
- Vue - Official - TypeScript support inside Vue SFCs
- ESLint - Find and fix problems in your code
- Prettier - Code formatter
- EditorConfig for VS Code
Try it now!
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-nuxt my-vitify-app
cd my-vitify-app
pnpm i
Authentication Setup
You can switch to any OAuth Providers supported by Nuxt Auth Utils or write your own.
Create a GitHub OAuth Application with:
- Homepage url:
http://localhost:3000 - Callback url:
http://localhost:3000/api/auth/github
Add the variables in the .env file:
NUXT_OAUTH_GITHUB_CLIENT_ID="my-github-oauth-app-id"
NUXT_OAUTH_GITHUB_CLIENT_SECRET="my-github-oauth-app-secret"
To create sealed sessions, you also need to add NUXT_SESSION_SECRET in the .env with at least 32 characters:
NUXT_SESSION_SECRET=your-super-long-secret-for-session-encryption
Nuxt Auth Utils generates one for you when running Nuxt in development the first time if no NUXT_SESSION_PASSWORD is set.
Development
Start the development server on http://localhost:3000
pnpm run dev