Data Loaders - Elevating Data Fetching in Vue
summary
Shows the new Vue Router Data Loaders API that hooks into navigation to block or lazy-load data, deduplicate parallel requests, and optionally run sequential on‑demand fetches; demonstrates migrating an app talking to the Art Institute of Chicago API, adding defineLoader/defineColoader, using a p‑colada cache layer for instant back/forward pagination, and a lazy image loader with server=false so SSR skips it. Claims: consistent commit/rollback on failure, configurable caching (staleTime), and it works end‑to‑end though API is still experimental.
AI-written summary · about
chapters (6)
- 0:00Start
- 0:26Data Loaders
- 1:33Client-only Data Fetching
- 2:54Using a Composable
- 3:26Data Loaders
- 6:52Demo Time
related talks
37mSimplify Data Fetching in Vue with Data Loaders with Q&A
21mSimplifying Data Fetching in Vue with Data Loaders
24mLight, lazy asynchronous patterns for Vue Apps
03mBoost Navigation Speed with Nuxt's Data Caching
31mOptimizing for Super Sonic Speed in Vue.js & Gridsome
24mSuperpowers of browser's Web API
50mVue.js - Power and Flexibility
07mThe Lazy Way to Better Performance