Simplifying Data Fetching in Vue with Data Loaders
summary
Introduces a new API called data loaders that integrates with Vue Router and Pinia to centralize fetching, block or abort navigation until data resolves, and avoid duplicate requests; default behavior runs fetches parallel by default and delays UI updates until all loaders complete. Demo migrates a watcher-based gallery to DefineLoader + exported composables, shows sequential secondary fetches for high‑res images, requires a non-setup TS export and a router plugin, and works in the live demo.
AI-written summary · about
chapters (12)
- 0:00Data loaders in Vue
- 1:26Traditional data fetching problems
- 3:35Limitations of Suspense
- 6:47Data loaders solve issues
- 8:58What is a data loader
- 10:02Migration demo setup
- 12:50Basic migration to DefineBasicLoader
- 14:14Composable with data loaders
- 16:00Sequential loading in search
- 17:29Search migration to data loaders
- 19:18Navigation control with loaders
- 20:01Finalizing search demo
related talks
30mData Loaders - Elevating Data Fetching in Vue
25mThe State of Data Loading
25mData Fetching Done Right
27mWhen To Fetch: Remixing React Router
24mLight, lazy asynchronous patterns for Vue Apps
35mPinia Colada: Smooth Data Fetching for Better UX
03mParallel Fetch Requests In Nuxt
28mLocal state and server cache: how to balance them with vue-query