Components & Composables

UI Components

Reusable UI primitives in components/ui/:

AppButton

Versatile button/link component with variants and sizes.

<!-- Primary (green) button -->
<AppButton @click="handleClick">Get Started</AppButton>

<!-- Ghost variant link -->
<AppButton href="/auth/login" variant="ghost" size="sm">Sign In</AppButton>

<!-- Outline variant -->
<AppButton variant="outline" size="lg">Learn More</AppButton>

Prop	Type	Default	Options
variant	String	`primary`	`primary`, `secondary`, `ghost`, `outline`
size	String	`md`	`sm`, `md`, `lg`
href	String	—	Renders as `<NuxtLink>` if provided
disabled	Boolean	`false`	Disables the button

AppInput

Text input with label, error message, and required indicator.

<AppInput
  v-model="email"
  label="Email"
  type="email"
  :error="emailError"
  required
/>

AppBadge

Small badge for status labels and tags.

AppLogo

GO-MVP logo in three sizes (sm, md, lg).

Auth Components

Components in components/auth/:

Component	Purpose
`LoginForm`	Email/password login with social login
`RegisterForm`	Registration form with validation
`ForgotPasswordForm`	Email input for password reset
`ResetPasswordForm`	New password form with token validation
`SocialLoginButton`	Firebase Google OAuth button

Landing Components

Components in components/landing/:

Component	Purpose
`HeroSection`	Main value proposition
`ProblemSection`	Problems GO-MVP solves
`ApproachSection`	The GO-MVP approach
`FeaturesSection`	Core features grid
`AiSection`	AI-assisted development highlight
`StackSection`	Tech stack overview
`UseCasesSection`	SaaS, marketplace, internal tools
`PricingSection`	Dynamic pricing from Stripe
`FaqSection`	Interactive FAQ accordion
`CtaSection`	Final call-to-action

Profile Components

Components in components/profile/:

Component	Purpose
`UserProfileCard`	User info (name, email, verification)
`SubscriptionCard`	Subscription plan and status
`ChangePasswordForm`	Password change form

Composables

All composables in composables/:

useApi

Generic API client with automatic token injection and 401 retry.

const api = useApi()
const data = await api('/api/v1/user/profile', { method: 'GET' })

Automatically adds Authorization: Bearer <token> header. On 401, attempts a single token refresh and retries.

useAuth

Authentication flows: register, login, socialLogin, logout, forgotPassword, resetPassword, refreshToken.

useCheckout

Stripe Checkout session creation. Returns isProcessing and error refs.

usePlans

Fetches pricing plans from the backend. Returns plans, oneTimePlans, isLoading, error.

useProfile

User profile fetching and password changes. Returns fetchProfile, changePassword, isLoading, error.

useScrollspy

Scroll position tracking for navbar background transitions. Used by TheNavbar.

useSubscription

Subscription status fetching. Returns subscription, fetchSubscription, isLoading, error. Handles 404 gracefully for users without subscriptions.