A minimalistic template for building SaaS applications using Nuxt 3, Tailwind, and others. Demonstrates most features of Nuxt and essential packages with basic implementations.
- ⚡️ Nuxt 3 (stable), Vue 3, and Vite 3
- 🔥 Optimized with Universal Rendering, Critters, Fontaine, and Nuxt Image
- 🔑 Basic authentication with Supabase + Nuxt Supabase
- 🍍 State management via Pinia
- 📲 PWA
- 🎨 Tailwind CSS and Headless UI
- 🌙 Dark mode with Tailwind
dark:variant via Nuxt Color Mode - 🗒 Google Fonts
- 🧩 VueUse for essential Vue composition utilities
- 🌍 I18n for localization
- 🖌 Prettier as code formatter and Tailwind Prettier plugin for auto-sorting Tailwind utility classes
- 📐 ESLint ready for Vue with Anthony Fu's config and Prettier taking precedence on formatting
- 📦 Auto-imports for Vue and Nuxt APIs, components, composables, and stores, thanks to Nuxt
- 📑 Layouts and file-based routing, thanks to Nuxt
- 🤙🏻 Reactivity transform enabled
- 🦾 TypeScript, of course
- 🥦 Taze to keep dependencies fresh
- ☁️ Deploy on Vercel, zero-config
- Testing
- Fix workaround for Pinia at
nuxt.config.ts:5-7. See https://github.com/nuxt/framework/issues/6623. - Fix workaround for Headless UI at
nuxt.config.ts:22. See P4sca1/nuxt-headlessui#13, tailwindlabs/headlessui#982, and https://github.com/nuxt/framework/issues/4084. - Fix HMR issues. See https://github.com/nuxt/framework/issues/1036 and https://github.com/nuxt/framework/issues/1529. For now, access your site with IP/network instead of
localhost.
For GitHub and Supabase configuration, see instructions here. Note that Supabase relies on email for its auth service, so your GitHub OAuth app should have access to user email. See supabase/auth#214.
Because pnpm somehow conflicts with Tailwind Prettier plugin and I like auto-sorted classes a lot. Issue is probably because how pnpm organizes modules but using shamefully hoist option did not work.
Because Nuxt Image module and Netlify has some issues with each other and local images give 404 error when deployed on Netlify (see #1 and #2). This issue does not happen on Vercel.
Mainly for three reasons:
- To have a starter template ready-to-use with Tailwind CSS + Headless UI + authentication (along with related plugins and configurations) and optimized for building SaaS apps.
- To practice and better understand how Nuxt 3 works and how it can be extended with modules and configurations.
- To note best-practices for myself so that I would remember to use them when I start a new project.
Inspired by Movies, Vitesse for Nuxt 3, and Sidebase.