ZShip
返回博客列表

Introducing the ZShip Nuxt Template: Ship Your AI SaaS in Days

Introducing the ZShip Nuxt Template: Ship Your AI SaaS in Days

2026-03-18Nuxt Team
当前显示回退语言
这篇文章首发只提供英文版本，当前展示英文原文。
Introducing the ZShip Nuxt Template: Ship Your AI SaaS in Days

Overview

The ZShip web-nuxt template is a production-ready, full-stack application built on Nuxt 4, Vue 3, and Cloudflare. It gives indie hackers and small teams everything they need to launch an AI-powered SaaS: authentication, payments, credits, AI playground, and a polished dashboard—all wired together.

If you prefer Nuxt over Astro for your frontend, or want a single SSR/SPA hybrid that handles both marketing and app logic, this template is for you.

What You Get Out of the Box

Authentication

  • Email + password signup and login with verification
  • Google OAuth single sign-on
  • Guest mode — convert anonymous users to registered accounts after signup
  • Session cookies and JWT handling via the auth service

Payments & Credits

  • Stripe integration for subscriptions and one-time purchases
  • Credit-based billing system
  • Pricing page with plan comparison
  • Checkout flow with webhook handling

AI Playground

  • Multi-model AI chat interface
  • Provider abstraction (OpenAI, Anthropic, etc.)
  • Session history and streaming responses
  • Configurable per-app via environment

Dashboard

  • Credits overview
  • Subscription management
  • Order history
  • API keys
  • Profile settings
  • Check-in rewards (optional)

Content & SEO

  • Landing page with hero, features, pricing, FAQ
  • Blog system (CMS-backed via node5-blog-service)
  • Docs with i18n support
  • Sitemap, robots.txt, Open Graph, structured data

Tech Stack

Layer Technology
Frontend Nuxt 4, Vue 3, Pinia, Tailwind CSS
Backend Cloudflare Workers (Hono), D1, KV, R2
Auth node1-auth-service
Payments node3-pay-service (Stripe)
AI node10-ai-service (multi-provider gateway)
Blog node5-blog-service
Deploy Cloudflare Pages (Nitro preset)

Project Structure

apps/web-nuxt/
├── app/
│   ├── config/site.ts      # Brand, domain, app_key
│   ├── i18n/ui.json        # Translations
│   ├── pages/              # Routes (blog, pricing, dashboard, auth)
│   └── assets/css/
├── nuxt.config.ts
└── packages/
    ├── nuxt-common-layer   # Shared pages, layouts, API proxies
    └── nuxt-ai-layer       # AI playground, provider composables

Quick Start

  1. Clone the repo

    git clone https://github.com/AICraftZShip/zship.git
cd zship
pnpm install

  2. Configure your app

    • Edit apps/web-nuxt/app/config/site.ts — set APP_KEY, domain, siteName
    • Ensure your project exists in the Admin Console with the same app_key

  3. Start dev

    pnpm dev

    The web-nuxt app runs alongside the other services. Visit the URL shown in the dev console.

  4. Deploy

    • Build: pnpm build
    • Deploy the apps/web-nuxt output to Cloudflare Pages (Nitro preset: cloudflare-pages)

Customization

  • Branding: app/config/site.ts — logo, domain, colors
  • i18n: app/i18n/ui.json — all user-facing strings
  • Pricing: Admin Console → Price Config
  • Blog: Admin Console → Blog (create posts via CMS or import markdown)

Why Nuxt?

  • SSR + SPA hybrid — SEO for marketing pages, client-side interactivity for dashboard
  • Nitro — deploy to Cloudflare Pages, Vercel, or Node
  • Layered architecture — nuxt-common-layer and nuxt-ai-layer can be extended by multiple apps
  • Vue ecosystem — Pinia, VueUse, composables for shared logic

Summary

The ZShip Nuxt template is designed for teams who want to ship a production-ready AI SaaS quickly. Auth, payments, credits, SEO, and AI are all integrated. You focus on your product logic; the rest is already wired.

Links: