/nuxt-saas-stripe-starter

Open-source SaaS Starter. Built using Nuxt 3, Prisma, Neon, Sidebase Nuxt Auth, Resend, Stripe, Nuxt UI, Nuxt Content

Primary LanguageVueMIT LicenseMIT

SaaS Starter

Nuxt 3 - SaaS Stripe Starter

Build and deploy your Nuxt SaaS within minutes !

Introduction

Nuxt SaaS Stareter is a open source boilerplate and will help you to create your own SaaS website with Nuxt.js. It is built with Nuxt 3, Nuxt UI and Nuxt Content. It is a perfect starting point for your next project.

This template is inspired by:

The documentation is your go-to resource for configuring and using the starter effectively.

Let's get started and happy coding!

Installation

  • You can start a fresh new project by cloning the repository from GitHub. Run the following command in your terminal
git clone https://github.com/devstack-be/nuxt-saas-stripe-starter
  • Or, deploy with Vercel:

Deploy with Vercel

Steps

  • Install dependencies using pnpm:
pnpm install
  • Copy .env.example to .env.local and update the variables.
cp .env.example .env.local
  • Start the development server:
pnpm run dev

Note

Let's check the configuration part for update all environment variables before use pnpm run dev

Roadmap

  • Add user Roles
  • Add Admin panel
  • Implement Docs search bar
  • Add a blog

Tech Stack + Features

Stack

  • Nuxt 3 - The Intuitive Vue Framework
  • Prisma ORM - Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB
  • Sidebase Nuxt Auth - Effortlessly connect your Nuxt 3 application with Google, Github, Azure and countless others.
  • Stripe - Online payment processing for internet businesses

UI

  • Nuxt UI / TailwindCSS – A UI Library for Modern Web Apps
  • Nuxt Image – Optimized Images for your Nuxt Apps
  • Nuxt Headless UI – Headless UI integration for Nuxt. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
  • Pinia Nuxt – The Vue Store that you will enjoy using
  • Nuxt Content – Create a powerful data layer for your application. Use Vue components in Markdown with the MDC syntax.
  • Nuxt OG Image – Generate OG Images with Vue templates in Nuxt.

Platforms

  • Vercel – Easily preview & deploy changes with git
  • Resend – A powerful email framework for streamlined email development
  • Neon – Serverless Postgres with autoscaling, branching, bottomless storage and generous free tier.

Hooks and Utilities

  • nFormatter – Format numbers with suffixes like 1.2k or 1.2M
  • withoutTrailingSlash - Remove trailing slashes from URLs
  • hasTrailingSlash - Check if a URL has a trailing slash

Code Quality

  • TypeScript – Static type checker for end-to-end typesafety
  • Prettier – Opinionated code formatter for consistent code style
  • ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

  • Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Author

Created by @devstack-be in 2024, released under the MIT license.

Credits

This project was inspired by Next SaaS Stripe Starter

This project was also inspired by shadcn's Taxonomy, Steven Tey’s Precedent, and Antonio Erdeljac's Next 13 AI SaaS.