What is the difference between defineAsyncComponent and lazy loading in Vue?

Question

Accepted Answer

**defineAsyncComponent** — explicit async loading. **lazy** — route-level code splitting.

**defineAsyncComponent:**
```typescript
import { defineAsyncComponent } from "vue"

const AsyncComponent = defineAsyncComponent({
    loader: () => import("./HeavyComponent.vue"),
    loadingComponent: LoadingSpinner,
    errorComponent: ErrorDisplay,
    delay: 200,
    timeout: 3000
})
```

**Route lazy loading:**
```typescript
// router/index.ts
const routes = [
    {
        path: "/dashboard",
        component: () => import("./views/Dashboard.vue")
    }
]
```

**Key differences:**
- **defineAsyncComponent** — component level.
- **Route lazy** — page level.

Vue.js: What is the difference between defineAsyncComponent and lazy loading in Vue?