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.tssuffix - Route middleware is applied via
definePageMeta({ middleware: 'auth' })in page components