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