Common Pitfalls
ChurchTools API
| Pitfall | Wrong | Correct |
|---|---|---|
| Nested params | { params: { key: 'val' } } | { key: 'val' } |
| Delete method | churchtoolsClient.delete() | churchtoolsClient.deleteApi() |
| Tags response | response.data | response (direct array) |
| Tag domains | 'appointment' | 'person' | 'song' | 'group' |
Vue Components
| Pitfall | Wrong | Correct |
|---|---|---|
| Button type | <button> | <button type="button"> |
| BaseCard import | Absolute path | Relative: ../common/BaseCard.vue |
| Reactivity | Plain objects | ref() or reactive() |
TypeScript
- •Check
src/ct-types.d.tsfor 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=Nonecookies onhttp://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:
vue
<!-- 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:
typescript
try {
loading.value = true
// API call
} catch (err) {
error.value = 'User-friendly message'
console.error('Debug info:', err)
} finally {
loading.value = false
}