┌─────────────────────────────────────────────────────────────────┐
│  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                 │
└─────────────────────────────────────────────────────────────────┘

// ❌ 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()

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

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

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

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

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

# 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