Data fetching is fundamental to building web applications, but it can quickly become complex, inconsistent and cumbersome, especially as your Vue.js app grows. In a recent talk at Frontend Nation, Eduardo San Martin Morote (creator of Vue Router and the Pinia state management library) introduced "data loaders" - an API he created to streamline data fetching with Vue Router.

What are Data Loaders?

Data loaders allow you to define data fetching logic in your Vue components but outside of their setup. This centralized approach allows the reuse of data loaders outside of the components that define them and preload data ahead of time.

One key benefit highlighted by Eduardo is parallel fetching by default. For independent data sources that don't depend on each other, data loaders will fetch them in parallel out-of-the-box. This contrasts with the cascading waterfall of fetches when nesting async setup in child components with <Suspense>.

Another powerful aspect is the tight integration with navigation. Data loaders can choose not to block navigation for non-critical data and also control the navigation exactly like in a navigation guard.

Improved Developer Experience

Beyond performance gains, data loaders aim to simplify data fetching code and provide a more coherent experience for developers.

With data loader definitions, we also get the tedious and common features of async tasks: loading and error states, deduplication of requests, etc. The talk demonstrated how to migrate existing fetching code to data loaders for a faster UI with less code.

Data loaders also help maintain a consistent UI state while data is fetched or refreshed. By delaying updates until all loaders resolve, you avoid temporary incoherent states commonly seen with piecemeal data loading.

Towards a Data Fetching Specification

While Eduardo's talk focused on his basic and Pinia Colada implementations, data loaders are proposed as an open specification that other Vue libraries and tools can implement, e.g. VueFire can expose data loaders that retrieve a real-time data source. The goal is to establish consistent data-fetching integration across the ecosystem.

Check out the full talk

If you're interested in learning more about simplifying data fetching in your Vue apps watch Eduardo's full talk on data loaders. The talk covers more examples, a live coding demo, and insights into the motivation behind this API approach.

For frontend developers building complex Vue applications, data loaders offer a compelling way to rethink how we approach data fetching for better performance, maintainability and developer experience. It's an area to keep an eye on as the specification and tooling around it evolves.