Setup

Learn how to set up your Nuxt Starter Kit application.

Install dependencies

pnpm install

Create database

pnpm db:generate

Setup environment variables

Define your environment variables in the .env file. You can use the .env.example file as a reference. I'm using @t3-oss/env-nuxt to typecheck the environment variables. If you start the development server, it will show you which environment variables are missing.

Start the development server

If your app is already deployed to NuxtHub, you can start the development server with the following command:

pnpm dev:remote

Else, you can start the development server with the following command:

pnpm dev

You can now access your app at http://localhost:9009.

NuxtHub

  1. Add some test testimonials in the key-value data storage under the testimonials key. I use the following value for the demo app:
[
  {
    "author": {
      "avatar": {
        "loading": "lazy",
        "src": "testimonials-avatars/avatar-1.jpg"
      },
      "description": "Full-Stack Developer",
      "name": "Mark T. "
    },
    "id": "K2Iw9utNkbMvAO-fyRYgC",
    "quote": "As a freelance developer, I work with multiple clients building SaaS platforms, and this Nuxt boilerplate has been my go-to starting point. It's well-documented, easy to customize, and comes with features like Tailwind CSS and Stripe integration out of the box. My clients are always impressed with the speed of delivery and the polished end product.",
    "source": {
      "name": "LinkedIn",
      "url": "https://mokkapps.de"
    },
    "title": "Perfect for Freelancers"
  },
  {
    "author": {
      "avatar": {
        "loading": "lazy",
        "src": "testimonials-avatars/avatar-2.jpg"
      },
      "description": " Founder & CTO, GrowthSprint",
      "name": "Sarah K."
    },
    "id": "_ry1c100Urdee2RqPiDEC",
    "quote": "The Nuxt SaaS boilerplate was a game-changer for our startup. We went from concept to MVP in a fraction of the time it would have taken us to build everything from scratch. The pre-integrated authentication, payment, and user management systems worked seamlessly, saving us weeks of development time. Highly recommend this for any team looking to fast-track their SaaS product!",
    "source": {
      "name": "BlueSky",
      "url": "https://mokkapps.de"
    },
    "title": "A Game Changer"
  },
  {
    "author": {
      "avatar": {
        "loading": "lazy",
        "src": "testimonials-avatars/avatar-3.jpg"
      },
      "description": "Managing Director, CloudWorks Studio",
      "name": "John D."
    },
    "id": "sV-iQg6HCLZEV3KmokTRm",
    "quote": "Our agency has built several SaaS products for clients, and the Nuxt SaaS boilerplate has saved us countless hours of work. The modular architecture makes it simple to scale and add new features, and the use of modern technologies like Nuxt 3 ensures high performance. It's been a huge productivity booster for our team!",
    "source": {
      "name": "E-Mail"
    },
    "title": "Agency Owner"
  }
]
  1. Upload the testimonial images to the NuxtHub blob storage.

Polar

Nuxt Starter Kit uses Polar to accept payments, see Payments for more information.

This starter kit is designed to support subscriptions (free & Pro) and lifetime deals. You should configure three products in Polar:

  • Pro Plan (yearly subscription)
  • Pro Plan (monthly subscription)
  • Lifetime Deal (one-time payment)
Any other product constellation needs adjustments in the layers/payment Nuxt layer and other parts of the codebase.