Simplify Data Fetching in Vue with Data Loaders with Q&A
summary
Introduces data loaders that integrate with Vue Router and composables to dedupe requests, delay committing updates until all route loaders resolve, and run fetches parallel by default unless explicitly awaited. Demo migrates a watcher-based paginated UI to loaders using the Art Institute of Chicago API, adds a sequential loader for full‑resolution images, and shows lazy loaders that confirm navigation immediately while images load. Plugin hooks into Pinia and a query cache so back navigation is instant for about 5 seconds.
AI-written summary · about
chapters (7)
- 0:00Introduction to data loaders
- 1:21Data fetching challenges
- 9:53Basic migration demo
- 17:07Advanced loading patterns
- 24:55Optimizing with caching
- 29:59Resources and conclusion
- 31:00Q&A session
related talks
30mData Loaders - Elevating Data Fetching in Vue
28mLocal state and server cache: how to balance them with vue-query
31mOptimizing for Super Sonic Speed in Vue.js & Gridsome
24mLight, lazy asynchronous patterns for Vue Apps
32mVue, simple yet scalable
35mPinia Colada: Smooth Data Fetching for Better UX
50mClean Async State Management
03mBoost Navigation Speed with Nuxt's Data Caching