Skip to content

kingyue737/vitify-nuxt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Vitify - Opinionated Vuetify Admin Starter Template

Vitify Nuxt

vue vuetify license

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 nuxt-echarts

  • 🎨 Theme color customization and dark mode

  • πŸ“± Responsive layout

  • πŸ›‘οΈ Authentication backed-in using nuxt-auth-utils

Variants

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

Dev tools

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