Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kingyue737/vitify-nuxt
🔽🏔 Vuetify 3 + Nuxt 3 Starter Template
https://github.com/kingyue737/vitify-nuxt
admin-template dashboard nuxt3 starter-template vite vue-template vuetify vuetify3
Last synced: 6 days ago
JSON representation
🔽🏔 Vuetify 3 + Nuxt 3 Starter Template
- Host: GitHub
- URL: https://github.com/kingyue737/vitify-nuxt
- Owner: kingyue737
- License: mit
- Created: 2023-11-01T13:19:03.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-24T05:34:01.000Z (15 days ago)
- Last Synced: 2024-10-24T23:39:06.847Z (15 days ago)
- Topics: admin-template, dashboard, nuxt3, starter-template, vite, vue-template, vuetify, vuetify3
- Language: Vue
- Homepage: https://vitify-nuxt.netlify.app/
- Size: 2.17 MB
- Stars: 89
- Watchers: 6
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - vitify-nuxt - Vuetify 3 + Nuxt 3, an opinionated admin starter template. (Uncategorized / Uncategorized)
- awesome - Vitify Nuxt - Admin template based on Nuxt    (🙌 Projects using Vuetify <a name="projects"></a> / Vuetify 3)
README
Vitify Nuxt
Vuetify 3 + Nuxt 3, Opinionated Admin Starter Template
## Features
- 💚 [Nuxt 3](https://nuxt.com/) - SPA, ESR, File-based routing, components auto importing, modules, etc
- 💥 SSR out of the box - powered by [Vuetify Nuxt module](https://github.com/vuetifyjs/nuxt-module)
- ⚡️ [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness
- 🍍 [State Management via Pinia](https://pinia.vuejs.org/)
- 📥 APIs auto importing - for Composition API, VueUse and custom composables
- ☁️ Deploy on [Netlify](https://www.netlify.com/), zero-config
- 🦾 TypeScript 100%
- 🧪 Unit, Component and E2E Testing with [@nuxt/test-utils](https://github.com/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](https://github.com/kingyue737/nuxt-echarts)
- 🎨 Theme color customization and dark mode
- 📱 Responsive layout
- 🛡️ Authentication backed-in using [nuxt-auth-utils](https://github.com/Atinux/nuxt-auth-utils)
## Variants
- [vitify-next](https://github.com/kingyue737/vitify-next) - Lightweight Vue 3 version without Nuxt
- [vitify-electron](https://github.com/kingyue737/vitify-electron) - Vuetify 3 + Vite + Electron starter
- [vitify-admin](https://github.com/kingyue737/vitify-admin) - Vue 2.7 with i18n, browser compatibility and mock server
## Pre-packed
### Nuxt Modules
- [Vuetify Nuxt Module](https://github.com/vuetifyjs/nuxt-module) - Zero-config Nuxt Module for Vuetify
- [VueUse](https://github.com/vueuse/vueuse) - Collection of useful composition APIs
- [Pinia](https://github.com/vuejs/pinia) - Intuitive, type-safe, light and flexible Store for Vue
- [Nuxt Icon](https://github.com/nuxt/icon) - Icon module for Nuxt with 200,000+ ready to use icons from Iconify
- [Nuxt ECharts](https://github.com/kingyue737/nuxt-echarts) - Nuxt module for Apache ECharts™
- [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) - Minimalist Authentication module for Nuxt
### 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/)
- [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)
- [Vue - Official](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)
## Try it now!
### GitHub Template
[Create a repo from this template on GitHub](https://github.com/kingyue737/vitify-nuxt/generate).
### Clone to local
If you prefer to do it manually with the cleaner git history
```bash
npx degit kingyue737/vitify-nuxt my-vitify-app
cd my-vitify-app
pnpm i
```
### Authentication Setup
> You can switch to any [OAuth Providers](https://github.com/Atinux/nuxt-auth-utils#supported-oauth-providers) supported by [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) or write your own.
Create a [GitHub OAuth Application](https://github.com/settings/applications/new) with:
- Homepage url: `http://localhost:3000`
- Callback url: `http://localhost:3000/api/auth/github`
Add the variables in the `.env` file:
```bash
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:
```bash
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
```bash
pnpm run dev
```
## License
[MIT License](./LICENSE)