Common Pitfalls

ChurchTools API

Vue Components

TypeScript

• Check src/ct-types.d.ts for ChurchTools types
• Always define interfaces for API responses
• Use strict typing for all data

Build Issues

• Verify import paths after moving components
• Check for missing dependencies in package.json
• Ensure all required fields in API requests

Safari-specific

• Blocks Secure; SameSite=None cookies on http://localhost
• Blocks third-party cookies from different domains
• Solution: Use Vite proxy + HTTPS

Form Submission

Buttons without type="button" will submit forms and cause page reloads:

<!-- Wrong - triggers form submission -->
<button @click="handleClick">Click</button>

<!-- Correct -->
<button type="button" @click="handleClick">Click</button>

API Error Handling

Always wrap API calls in try-catch with loading states:

try {
  loading.value = true
  // API call
} catch (err) {
  error.value = 'User-friendly message'
  console.error('Debug info:', err)
} finally {
  loading.value = false
}