NuxTailwind: Nuxt 3 + Tailwind SaaS Template

A minimalistic template for building SaaS applications using Nuxt 3, Tailwind, and others. Demonstrates most features of Nuxt and essential packages with basic implementations.

Live Demo

Features

• ⚡️ 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

To do

• 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.

FAQ

How to set up auth configurations?

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.

Why not use pnpm?

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.

Why not use Netlify?

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.

Why create this template?

Mainly for three reasons:

1. 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.
2. To practice and better understand how Nuxt 3 works and how it can be extended with modules and configurations.
3. 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.