Project Structure

Frontend directory layout and file organization

Project Structure

go-mvp-frontend/
├── assets/
│   └── css/
│       └── main.css              # Tailwind directives + custom utilities
├── components/
│   ├── auth/                     # Login, register, password forms
│   │   ├── LoginForm.vue
│   │   ├── RegisterForm.vue
│   │   ├── ForgotPasswordForm.vue
│   │   ├── ResetPasswordForm.vue
│   │   └── SocialLoginButton.vue
│   ├── landing/                  # Marketing page sections
│   │   ├── HeroSection.vue
│   │   ├── ProblemSection.vue
│   │   ├── ApproachSection.vue
│   │   ├── FeaturesSection.vue
│   │   ├── AiSection.vue
│   │   ├── StackSection.vue
│   │   ├── UseCasesSection.vue
│   │   ├── PricingSection.vue
│   │   ├── FaqSection.vue
│   │   └── CtaSection.vue
│   ├── layout/                   # App shell
│   │   ├── TheNavbar.vue
│   │   ├── TheFooter.vue
│   │   ├── AuthenticatedLayout.vue
│   │   └── AuthenticatedSidebar.vue
│   ├── profile/                  # User profile components
│   │   ├── UserProfileCard.vue
│   │   ├── SubscriptionCard.vue
│   │   └── ChangePasswordForm.vue
│   └── ui/                       # Reusable UI primitives
│       ├── AppButton.vue
│       ├── AppInput.vue
│       ├── AppBadge.vue
│       └── AppLogo.vue
├── composables/                  # Feature composables
│   ├── useApi.ts                 # API client with auth
│   ├── useAuth.ts                # Authentication flows
│   ├── useCheckout.ts            # Stripe checkout
│   ├── usePlans.ts               # Pricing plans
│   ├── useProfile.ts             # User profile
│   ├── useScrollspy.ts           # Scroll position
│   └── useSubscription.ts        # Subscription status
├── middleware/                   # Route guards
│   ├── auth.ts                   # Protected routes
│   └── guest.ts                  # Guest-only routes
├── pages/                        # File-based routing
│   ├── index.vue                 # Landing / Dashboard
│   ├── profile.vue               # User profile
│   ├── settings.vue              # Settings
│   ├── privacy.vue               # Privacy policy
│   ├── terms.vue                 # Terms of service
│   ├── auth/
│   │   ├── login.vue
│   │   ├── register.vue
│   │   ├── forgot-password.vue
│   │   ├── reset-password.vue
│   │   └── email-verified.vue
│   └── payment/
│       ├── success.vue
│       └── cancel.vue
├── plugins/                      # Runtime plugins
│   ├── firebase.client.ts        # Firebase init (client-only)
│   └── umami.client.ts           # Analytics (client-only)
├── stores/                       # Pinia stores
│   └── auth.ts                   # Auth state
├── types/                        # TypeScript interfaces
│   ├── auth.ts                   # Auth request/response types
│   └── stripe.ts                 # Stripe/plan types
├── tests/                        # Test suites
│   ├── setup.ts                  # Global test setup
│   ├── unit/                     # Unit tests
│   └── integration/              # Integration tests
├── public/                       # Static assets
│   ├── favicon.svg
│   └── robots.txt
├── app.vue                       # Root component
├── nuxt.config.ts                # Nuxt configuration
├── tailwind.config.ts            # Tailwind configuration
├── vitest.config.ts              # Test configuration
├── Dockerfile                    # Multi-stage Docker build
└── docker-compose.yml            # Development services

Key Conventions

  • Components are organized by feature domain, not by type
  • Auto-import means no explicit import statements for composables or components
  • pathPrefix: false — components are referenced by filename only (e.g., <AppButton>, not <UiAppButton>)
  • Client-only plugins use the .client.ts suffix
  • Route middleware is applied via definePageMeta({ middleware: 'auth' }) in page components