Nuxt Tanstack Mastery

Nuxt 3 + TanStack Query Mastery

Filosofi: "Simplicity is the ultimate sophistication" — Write code that your future self will thank you for.

Core Principles (WAJIB dipatuhi)

┌─────────────────────────────────────────────────────────────────┐
│  1. KISS (Keep It Stupid Simple) - Jangan over-engineer        │
│  2. YAGNI (You Ain't Gonna Need It) - Build for today          │
│  3. DRY (Don't Repeat Yourself) - Tapi jangan premature DRY    │
│  4. Composition over Inheritance - Favor composables           │
│  5. Single Responsibility - One function, one job              │
│  6. Explicit over Implicit - Readable > clever                 │
└─────────────────────────────────────────────────────────────────┘

Quick Decision Matrix

Reference Files

Baca reference yang relevan berdasarkan kebutuhan:

• references/folder-structure.md — Struktur folder production-ready dengan penjelasan setiap direktori
• references/tanstack-query.md — TanStack Query patterns, caching strategies, optimistic updates
• references/clean-code.md — Clean code principles, naming conventions, composables patterns
• references/debugging.md — Debugging techniques, common errors, troubleshooting guide
• references/performance.md — Performance optimization, lazy loading, bundle analysis
• references/security.md — Security best practices, XSS prevention, auth patterns
• references/common-pitfalls.md — Bugs yang sering terjadi dan cara menghindarinya
• references/libraries.md — Curated list library terpercaya dengan use cases
• references/state-management.md — Pinia patterns, when to use what
• references/code-examples.md — Real-world code examples dan patterns

Golden Rules (Cetak dalam otak)

1. Composables adalah Raja

// ❌ JANGAN: Logic di component
const MyComponent = {
  setup() {
    const data = ref([])
    const loading = ref(false)
    const fetchData = async () => { /* ... */ }
    // 50 lines of logic...
  }
}

// ✅ LAKUKAN: Extract ke composable
// composables/useProducts.ts
export function useProducts() {
  const { data, isLoading } = useQuery({ /* ... */ })
  return { products: data, isLoading }
}

// Component menjadi bersih
const { products, isLoading } = useProducts()

2. TypeScript adalah Non-negotiable

// ❌ any = technical debt
const data: any = await fetch()

// ✅ Type everything
interface Product {
  id: string
  name: string
  price: number
}
const data: Product[] = await fetch()

3. Error Boundaries WAJIB ada

<!-- Wrap setiap section dengan error boundary -->
<NuxtErrorBoundary>
  <ProductList />
  <template #error="{ error }">
    <ErrorDisplay :error="error" />
  </template>
</NuxtErrorBoundary>

4. Reactivity dengan Benar

// ❌ Reactivity loss
const { data } = useQuery()
const items = data.value // Loss reactivity!

// ✅ Preserve reactivity
const { data } = useQuery()
const items = computed(() => data.value ?? [])

Project Bootstrap Command

# Nuxt 3 + TanStack Query + Essential tools
npx nuxi@latest init my-app
cd my-app
npm install @tanstack/vue-query @pinia/nuxt @vueuse/nuxt zod @vee-validate/nuxt
npm install -D @nuxt/devtools typescript @types/node

Checklist Sebelum Production

• TypeScript strict mode enabled
• Error boundaries di setiap route
• Loading states untuk semua async operations
• Input validation dengan Zod
• Environment variables di .env (bukan hardcode)
• Bundle size < 200KB initial JS
• Lighthouse score > 90
• Security headers configured
• Rate limiting untuk API calls
• Proper caching strategy dengan TanStack Query