Configuration

Environment Variables

All frontend configuration is done via environment variables with the NUXT_PUBLIC_ prefix:

*Firebase variables are only required if you use social login (Google, Apple). The app works with email/password auth only.

Nuxt Config (nuxt.config.ts)

Key configuration:

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@nuxt/fonts',
    '@nuxtjs/sitemap',
    '@nuxt/content'
  ],

  components: [
    { path: '~/components', pathPrefix: false }
  ],

  runtimeConfig: {
    public: {
      apiBaseUrl: '',
      umamiHost: '',
      umamiId: '',
      firebaseApiKey: '',
      firebaseAuthDomain: '',
      firebaseProjectId: ''
    }
  }
})

Notable Settings

• pathPrefix: false — Components are auto-imported without directory prefixes
• CSP headers — Content Security Policy is configured in routeRules for API, Firebase, and Umami domains
• Sitemap — Auth, payment, and profile routes are excluded from the sitemap
• Fonts — Geist (sans) and JetBrains Mono (mono) loaded via @nuxt/fonts

Tailwind Config (tailwind.config.ts)

The dark theme is defined as custom colors:

colors: {
  background: '#0a0a0b',
  foreground: '#fafafa',
  muted: { DEFAULT: '#1a1a1c', foreground: '#a1a1aa' },
  accent: { DEFAULT: '#10b981', foreground: '#ffffff' },
  card: '#111113',
  border: '#27272a'
}

Using Theme Colors

<!-- Background and text -->
<div class="bg-background text-foreground">

<!-- Cards -->
<div class="bg-card border border-border rounded-lg">

<!-- Accent (green) for CTAs -->
<button class="bg-accent text-accent-foreground">

<!-- Muted text -->
<p class="text-muted-foreground">

CSS (assets/css/main.css)

Custom utilities and base styles:

• Smooth scrolling with prefers-reduced-motion respect
• Custom scrollbar styling (thin, dark)
• Green selection color (::selection)
• Animation delay utilities (delay-100 through delay-500)
• Focus ring utility for accessibility (.focus-ring)
• Glow effect for decorative elements