Vitify Nuxt

Vuetify 3 + Nuxt 3, Opinionated Admin Starter Template

Live Demo

Features

• 💚 Nuxt 3 - SPA, ESR, File-based routing, components auto importing, modules, etc

• 💥 SSR out of the box - powered by Vuetify Nuxt module

• ⚡️ Vite, pnpm, ESBuild - born with fastness

• 🍍 State Management via Pinia

• 📥 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 vue-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
• DevTools - unleash Nuxt Developer Experience
• Nuxt Auth Utils - Minimalist Authentication module for Nuxt

Plugins

• rollup-plugin-regexp - auto replace @mdi/font with @mdi/js in <VIcon>, reduce bundle size

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
  • Volar - TypeScript support inside Vue SFCs
  • ESLint - Find and fix problems in your code
  • Prettier - Code formatter
  • EditorConfig for VS Code
  • Material Design Icons Intellisense

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

License

MIT License