Setting up locally

This guide will walk you through setting up Nuxtbe in your local development environment.

Project Structure

After cloning and installing, project structure will include:

Nuxtbe Project Structure

app/
- assets/
  css/
  tailwind.css
- components/
  ui/
  button.vue
  ...
- BrandLogo.vue
- HeroList.vue
- ...
- composables/
- layouts/
- lib/
- pages/
- utils/
- app.config.ts
- app.vue
- error.vue
content/
- docs/
  index.md
  ...
layers/
- docs/
  ...
public/
server/
- api/
  ...
- utils/
  ...
supabase/
- functions/
  ...
- migrations/
  ...
- ...
types/
- ...
nuxt.config.ts
tailwind.config.ts
eslint.config.ts
...

Nuxtbe is built with compatibility mode for Nuxt 4 and follows Nuxt 4 project structure.

Initial Setup

Configure Environment

Copy the example environment file:

cp .env.example .env

Run the Supabase migration

Follow steps from Supabase Database setup

Fill in the environment variables

# Supabase Configuration
# URL of your Supabase project (found in Project Settings > API)
SUPABASE_URL="Your Supabase URL"
# Anon/Public key for client-side API calls (found in Project Settings > API)
SUPABASE_KEY="Your Supabase Key"
# Service role key for server-side API calls (KEEP THIS SECRETclear!)
SUPABASE_SERVICE_KEY="Your Supabase Service Key"
# Secret for email webhook verification
SEND_EMAIL_HOOK_SECRET="Your Send Email Hook Secret"

# Stripe Configuration
# Secret key for server-side Stripe API calls
STRIPE_SERVER_SECRET_KEY="Your Stripe Server Secret Key"
# Secret for verifying Stripe webhook signatures
STRIPE_WEBHOOK_SECRET="Your Stripe Webhook Secret"

# Resend Email Service Configuration

# API key for Resend email service
NUXT_MAILING_RESEND_API_KEY="Your Resend API Key"
# Audience ID for email targeting
NUXT_MAILING_RESEND_AUDIENCE_ID="Your Resend Audience ID"

# LemonSqueezy Configuration
# API key for LemonSqueezy integration
NUXT_LEMONSQUEEZY_API_KEY="Your Lemonsqueezy API Key"
# Webhook secret for Supabase integration
NUXT_LEMONSQUEEZY_WEBHOOK_SECRET_SUPABASE="Your Lemonsqueezy Webhook Secret for Supabase"
# General webhook secret for LemonSqueezy
NUXT_LEMONSQUEEZY_WEBHOOK_SECRET="Your Lemonsqueezy Webhook Secret"

Start Development Server

npm

pnpm

bun

npm run dev

Well done! An app should be running at http://localhost:3000.

Never commit your .env file to version control. Make sure it's listed in your .gitignore.

Authentication Setup

Supabase Configuration

Create a Supabase project at supabase.com
Copy your project URL, anon key, and service key
Update your .env file with these values

# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/_/settings/general
SUPABASE_URL=your-project-url
# You can get Project Api Keys from your project's settings URL: https://supabase.com/dashboard/project/_/settings/api
SUPABASE_KEY=your-anon-key
SUPABASE_SERVICE_KEY=your-service-key
# Send Email Hook Secret is generated in the Supabase Dashboard under the [Edge Functions](https://supabase.com/dashboard/project/_/auth/hooks){target="_blank"} tab
SEND_EMAIL_HOOK_SECRET="your-webhook-secret"

Payment Integration

Stripe Setup (Optional)

Create a Stripe account at stripe.com
Get your API keys from the Stripe Dashboard
Update your .env file:

STRIPE_SERVER_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

More details of api keys can be found in Stripe documentation.

LemonSqueezy Setup (Optional)

Create a LemonSqueezy account
Generate API keys from your dashboard
Add to your .env:

LEMONSQUEEZY_API_KEY="..."
LEMONSQUEEZY_WEBHOOK_SECRET="..."

More details of api keys can be found in LemonSqueezy documentation.

Email Service

Resend Configuration (Required)

Sign up for Resend at resend.com
Create API key and audience ID
Update environment variables:

RESEND_API_KEY="re_..."
RESEND_AUDIENCE_ID="..."

Customization

Tailwind Configuration

Customize your theme in tailwind.config.ts:

export default {
  theme: {
    extend: {
      colors: {
        // Add your custom colors
      },
      // Add other theme customizations
    }
  }
}

App Configuration

Modify app.config.ts for application-specific settings:

export default defineAppConfig({
  title: 'Your App Name',
  description: 'Your app description',
  // Add other app configurations
})

Nuxt Configuration

Customize your Nuxt application settings in nuxt.config.ts:

export default defineNuxtConfig({
  // Add your custom configurations
})

Troubleshooting

Common issues and solutions:

Port already in use: Stop other development servers or change port using PORT=3001 npm run dev
Module not found: Try removing node_modules and running install again
TypeScript errors: Run npm run typecheck to identify issues

For additional help, check our GitHub issues or join our Discord community.