Development Guide

Welcome to the NuxtPro development guide! This guide helps you quickly understand the tech stack and code structure—whether you’re adding features, fixing bugs, or learning Nuxt 3 in depth.

Tech stack overview

NuxtPro is built on a modern, efficient stack:

• Nuxt 3 -> Full-stack framework for production.
• Vue 3 -> UI library for web and native UIs.
• BetterAuth -> Simple and efficient auth framework.
• Shadcn UI -> Modern UI component library.
• Tailwind CSS -> Utility-first CSS framework.
• Drizzle ORM -> TypeScript ORM toolkit.
• Stripe -> Online payments.
• BagelPay -> Payment collection for SaaS/indie devs.
• Creem -> Online payments.
• PayPal -> Online payments (often used for e-commerce).
• Resend -> Modern email API service.
• Nuxt i18n -> i18n for Nuxt projects.
• Plausible -> Privacy-friendly analytics alternative.
• vite-pwa -> Zero-config PWA solution for Vite.

Project structure

Understanding the directory structure is the first step to working efficiently. Here are the key folders:

nuxt-template/
├── app.config.ts           # App config
├── app.vue                 # Main app entry
├── nuxt.config.ts          # Nuxt config
├── package.json            # Dependencies
├── pnpm-lock.yaml          # pnpm lockfile
├── tailwind.config.js      # TailwindCSS config
├── tsconfig.json           # TypeScript config
├── README.md               # Readme
├── components.json         # Component config
├── assets/                 # Static assets
├── components/             # Components
│   ├── nuxtpro/            # NuxtPro components
│   │   ├── cta/            # Call-to-action
│   │   ├── developer/      # Developer section
│   │   ├── faq/            # FAQ
│   │   ├── features/       # Features
│   │   ├── footer/         # Footer
│   │   ├── header/         # Header
│   │   ├── hero/           # Hero section
│   │   ├── pricing/        # Pricing
│   │   ├── scrollPopup/    # Scroll popup
│   │   ├── showcase/       # Showcase
│   │   ├── testimonials/   # Testimonials
│   │   └── waitlist/       # Waitlist
│   │
│   └── ui/                 # Shared UI components
│
├── config/                 # Configuration
│   └── drizzle.config.ts   # Drizzle ORM config
│
├── i18n/                   # Internationalization
├── layouts/                # Layouts
├── lib/                    # Libraries
│   └── auth/               # Auth related
├── middleware/             # Middleware
├── pages/                  # Pages
│   ├── affiliate/          # Affiliate page
│   ├── ai/                 # AI pages
│   ├── blog/               # Blog
│   ├── customer/           # Customer pages
│   ├── license/            # License
│   ├── privacy/            # Privacy policy
│   ├── roadmap/            # Roadmap
│   ├── terms/              # Terms
│   ├── cancel.vue          # Cancel page
│   ├── error.vue           # Error page
│   ├── index.vue           # Home
│   └── success.vue         # Success page
│
├── plugins/                # Plugins
│   └── referral.ts         # Referral plugin
│
├── public/                 # Public assets
├── server/                 # Server
│   ├── api/                # API routes
│   ├── database/           # Database
│   ├── migrations/         # Migrations
│   ├── plugins/            # Server plugins
│   └── tsconfig.json       # Server TS config
│
└── utils/                  # Utilities

Practice: add a new page

Creating a new page in NuxtPro is straightforward thanks to file-based routing.

1. Create a new .vue file under pages/, e.g. my-new-page.vue.
2. Write your Vue component:

<template>
  <div>
    <h1>My New Page</h1>
    <p>Created with NuxtPro!</p>
  </div>
</template>

<script setup lang="ts">
// Add your logic here
</script>

3. Start the dev server (pnpm dev).
4. Visit http://localhost:3000/my-new-page to view your new page.

Practice: create and use a component

For reuse and maintainability, we recommend splitting UI into components.

1. Create a folder under components/nuxtpro, then create a component file, e.g. MyButton.vue.
2. Write the component:

<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot>Default Button</slot>
  </button>
</template>

3. With Nuxt 3 auto-import, you don’t need to register/import the component manually. Use it directly:

<!-- in pages/my-new-page.vue -->
<template>
  <div>
    <h1>My New Page</h1>
    <p>Here is a custom button example:</p>
    <MyButton>Click me!</MyButton>
  </div>
</template>

Practice: create a backend API

Nuxt 3 lets you create backend endpoints under server/api/.

1. Create a folder for the API under server/api/, then create an endpoint file, e.g. /hello/hello.ts.
2. Implement the handler:

// server/api/hello/hello.ts
export default defineEventHandler((event) => {
  return {
    message: 'Hello from NuxtPro API!',
  }
})

3. Your endpoint is now available at http://localhost:3000/api/hello/hello.

Next steps

This guide is only the beginning. We recommend:

• Browsing pages/ and components/ to learn how existing pages are implemented.
• Reading server/api/ to understand database/external service integration patterns.
• Modifying the code and experimenting to see how things work.

Have fun building with NuxtPro!