Nuxt Vue Guide: Step-by-Step to Build and Ship a SaaS App

You searched for Nuxt Vue because you want a clear path from idea to working app. This guide gives you exact steps, concrete decisions to make, and checks that prevent rework. It reflects what consistently works to ship the first version fast without painting yourself into a corner.

Choose your start: clean Nuxt or a Nuxt SaaS starter kit

You have two good paths. Start from a clean Nuxt project and wire up everything yourself. Or use a Nuxt boilerplate built for SaaS so you start with authentication, payments, i18n, and admin already working. If time-to-first-customer matters, a Nuxt SaaS starter kit saves weeks of glue work and testing. If you plan to buy a Nuxt boilerplate, check for:

• Protected routes via route middleware and server-side authorization, not client-only checks.
• Payments for one-time and subscriptions with verified webhooks and an account billing UI.
• Typed ORM with migrations and a seed strategy that never pollutes production.
• S3-compatible uploads with presigned URLs, CORS examples, and signed downloads.
• i18n with a visible language switch, locale-aware routes, and SEO-friendly hreflang.
• Admin area with role-based access, audit logs, and a way to impersonate only with explicit approval.
• SEO defaults, Open Graph images, a sitemap endpoint, and simple analytics.
• Deployment scripts that run migrations and seed only what is safe in each env.

When people say Nuxt SaaS boilerplate or Nuxt SaaS template, they want a repo with user accounts, checkout, and a dashboard that compiles on day one. The best ones also cover analytics, SEO basics, and file storage so you do not get stuck stitching services. Below, each step notes what you build from scratch versus what a starter kit usually provides out of the box.

Build the core: from create to first deploy

1. Create your project. From scratch, run npx nuxi init myapp, then enable TypeScript strict, ESLint, and tests. With a starter kit, clone and run its setup script. Good kits ship a typed codebase with a preconfigured database and ORM plus migrations, so your models and APIs stay consistent as you scale.
2. Set environment variables early. Add .env and .env.example. Use runtimeConfig in nuxt.config.ts for server secrets, and NUXT_PUBLIC_* for safe client values. Define keys for database URLs, storage, OAuth, and payments. Set production values in your host before first deploy to avoid broken callbacks and failed webhooks.
3. Authentication and protected pages. Implement email-password, magic links, and Google sign-in if you need it. Keep sessions in httpOnly cookies with SameSite=Lax or Strict and short-lived tokens. Protect routes with middleware/auth.global.ts and enforce roles again on the server. A solid starter includes sign up, login, password reset, transactional emails, and examples for /api/auth/callback routing.
4. Payments and checkout. Support one-time purchases and subscriptions. Build a simple flow: pricing page to checkout session, return URL to a success page, and a billing portal link. Verify webhooks in server/api/webhooks/payments.post.ts, log event IDs, and make handling idempotent. Surface plan, renewal date, and failed payment status in the account page with a clear retry path. Many kits ship these flows and let you switch providers without rewriting UI.
5. Database, ORM, and migrations. Use Postgres with Prisma or Drizzle. Write idempotent migrations and run them on every deploy. Add composite indexes for frequent filters, use UUIDs, and avoid destructive ALTERs without a copy-then-swap plan. Seed only development data locally. A preconfigured ORM in a typed codebase makes refactors safer.
6. File storage. For uploads, use S3-compatible storage. Generate short-lived presigned URLs server-side, prefer presigned POST for large files, and store only the object key, size, and content type in your DB. Set bucket CORS to allow your origin, enforce max size client and server, and validate Content-MD5 when it matters. A starter that already handles secure uploads saves a lot of trial and error.
7. AI features where they help. Keep AI calls on the server behind server/api/* endpoints. Support streaming responses for chat where possible, add per-user rate limits, and cap spend per account. Expose model selection in settings if it is core to the experience. Kits that include AI chat and generation with switchable models let you test quickly while logging usage to control cost.
8. i18n and an in-app language switch. Set up internationalization before your first page goes live. Keep strings in translation files, add a header toggle, and pick a route strategy such as prefix except default. Add hreflang and canonical tags so search engines map locales correctly. Early i18n avoids rewrites and expands reach from day one.
9. Admin area and moderation. Create an /admin layout and guard it with both middleware and server checks. Define the minimum privileges for each role, log admin actions, and never blend admin-only APIs with public ones. If a kit includes an Admin Panel, focus on your policies, not scaffolding UI.
10. SEO, analytics, and content. Use sensible defaults with useSeoMeta, generate Open Graph images for shareable pages, and ship a sitemap endpoint so every new page is indexable. Track pageviews, signups, and key actions. If you add a blog with Nuxt Content, make it multilingual and wire it into your sitemap to keep publishing simple.
11. Cron jobs and lifecycle emails. Schedule daily reports, email reminders, and cleanup via your host’s scheduler or an external cron pinging /api/cron/*. Make jobs idempotent with a run key so retries do not duplicate work. Transactional emails should cover password resets, welcomes, billing events, and limits reached, using templates tested on mobile.
12. Deploy and verify. Use a repeatable build with CI. Run tests, build, then apply DB migrations as part of release. After going live, test sign up, login, protected routes, checkout, webhooks, and language switching in production. Turn on error reporting, set alerts for webhook failures, and watch logs for the first 24 hours.

Common pitfalls and the fixes

• Mixing server-only code into client components. Keep secrets and API keys in server routes or Nitro handlers. Use composables that detect client versus server to avoid SSR crashes.
• Broken OAuth callbacks. Configure exact redirect URIs in your provider and your app. A single trailing slash mismatch blocks all logins.
• Unverified webhooks. Always verify signatures from your payment provider. Log every event ID and ignore duplicates to keep invoices and subscriptions in sync.
• Public env mixups. Client-side reads only work for NUXT_PUBLIC_*. Put everything else in runtimeConfig so it stays server-only.
• i18n routes fighting SEO. Decide between subpaths or domains per language, and ensure canonical tags point to the correct locale version.
• S3 uploads failing in production. Set correct CORS for your bucket, enforce content type, and generate short-lived signed URLs server-side. Test with large files and slow networks.
• Cron jobs double-running. Use a single scheduler per environment or add a distributed lock so you do not send duplicate emails.
• Migrations that wipe data. Back up before deploy. Write forwards and backwards-safe migrations. Never change a column type without a copy-then-swap plan.
• Analytics with holes. Track signups, activations, key feature use, and cancellations, not just pageviews. Confirm events fire in private windows and with blockers.

Build and sell an AI tool with Nuxt Vue

The fastest route is to start with a Nuxt SaaS starter kit so you get authentication, protected pages, payments, and AI generation ready on day one. Scope a narrow first release, price a single plan, and instrument analytics to see where users drop off. If your tool processes media, make sure file uploads and storage are stable before you try to grow. For example, a product like SubtitlesFast needs reliable uploads, a simple checkout with a subscription option, and clear account limits exposed in the UI.

Ship a specific landing page with real examples, add a blog post showing outcomes, and include a friction-light trial that still collects email so you can send a welcome sequence. Meter usage server-side, cap spend per user, and show remaining credits in the header. Keep your admin panel lean so you can issue refunds, handle chargebacks, and block abuse without touching the database. Iterate weekly and ship one improvement tied directly to an analytics drop-off or a support ticket.

Key takeaways

• Pick your start. A Nuxt boilerplate with SaaS features gets you to first users faster than wiring everything from scratch.
• Handle the basics early. Auth, payments, storage, i18n, SEO, and analytics are easier before launch than after.
• Protect production. Verify webhooks, lock cron jobs, back up before migrations, and keep secrets server-side.
• Ship fast, then measure. Let data guide your next sprint, not guesses.