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
- 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"
}
]
- 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.