Squared Sums

Installation

Set up the Rapidstack Nuxt 4 boilerplate in minutes

Get your development environment up and running with this step-by-step installation guide.

Prerequisites

Before you begin, make sure you have the following installed:

This boilerplate uses PNPM as the package manager. Do not use npm or yarn, as this may cause dependency issues.

Clone the repository

First, clone the repository to your local machine:

git clone https://github.com/yourusername/rapidstack-nuxt4.git
cd rapidstack-nuxt4

Install dependencies

Install all project dependencies using PNPM:

pnpm install

This will install all required packages including Nuxt 4, Prisma, Stripe, authentication libraries, and more.

Set up environment variables

Create a .env file in the root directory. You can start by copying the example file:

cp .env.example .env

Then, edit .env with your configuration. At minimum, you'll need:

.env
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/myapp"

# Site configuration
NUXT_PUBLIC_SITE_URL="http://localhost:3000"
NUXT_PUBLIC_SITE_NAME="Your App Name"
NUXT_PUBLIC_SITE_DOMAIN="localhost"

# Email (Resend)
RESEND_API_KEY="re_..."

# Stripe payments
STRIPE_SECRET_KEY="sk_test_..."
NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# Payment mode: 'auth' or 'authless'
NUXT_PUBLIC_PAYMENT_MODE="auth"
Don't commit your .env file to version control. It contains sensitive credentials.
See the full list of environment variables and their descriptions in the configuration guide.

Set up the database

Create your database

If you're using a local PostgreSQL instance, create a new database:

createdb myapp

Or use your PostgreSQL client to create a database.

Run migrations

Run Prisma migrations to set up your database schema:

pnpm prisma migrate dev

This creates all necessary tables including users, sessions, payments, subscriptions, and more.

You can inspect your database schema in prisma/schema.prisma.

(Optional) Seed the database

If you want to add test data, you can create a seed script:

pnpm prisma db seed

Start the development server

Now you're ready to start the development server:

pnpm dev

The application will be available at http://localhost:3000.

That's it! Your Nuxt application is now running. Open your browser and you should see the landing page.

Verify the installation

To make sure everything is working correctly:

  1. Visit the homepage - You should see the landing page
  2. Check dark mode - Toggle the theme switcher in the header
  3. Try registration - Create a test account at /auth/register
  4. Check the database - Verify the user was created in your database

Next steps

Now that your installation is complete:

Quick start guide

Get your first feature running with our quickstart tutorial.

Configure your app

Learn about all available configuration options.

Set up authentication

Understand how authentication works in this boilerplate.

Troubleshooting

Port 3000 is already in use

If port 3000 is already in use, you can change it:

PORT=3001 pnpm dev

Database connection errors

Make sure your DATABASE_URL is correct and PostgreSQL is running:

# Check if PostgreSQL is running
pg_isready

# Or with psql
psql -h localhost -U your_username -d your_database

Prisma errors

If you're having Prisma-related issues, try:

# Generate Prisma client
pnpm prisma generate

# Reset the database (⚠️ deletes all data)
pnpm prisma migrate reset

Module not found errors

If you see module import errors after installation:

# Clear Nuxt cache
rm -rf .nuxt

# Reinstall dependencies
rm -rf node_modules pnpm-lock.yaml
pnpm install
Still having issues? Check out the troubleshooting section or reach out for support.

Introduction

A production-ready Nuxt 4 boilerplate with authentication, payments, AI, and more

Quick start

Get up and running with your first feature in 5 minutes