posva/nuxt-examples-data-loaders

This repository is a set of working example projects that demonstrate a specific approach to fetching data in Nuxt applications. Nuxt is a framework for building web applications on top of Vue.js, and the examples here focus on how to load server data when a user navigates between pages. The traditional approach in Nuxt is to use built-in helpers like useFetch or useAsyncData inside page components. The alternative shown here is called data loaders: instead of fetching inside a component, the fetch runs earlier, in a navigation guard (a step that runs before the page actually changes). This means the data is already available the moment the page first draws on screen, without a loading flash. The repository shows this in two flavors. The first uses defineBasicLoader, a straightforward option built into Vue Router. The second uses defineColadaLoader, which connects to a library called Pinia Colada and adds caching, automatic deduplication (so two components asking for the same data only trigger one network request), and cache invalidation when data is changed. Both flavors implement the same three example pages: a static data call, a product page driven by a URL parameter, and a quote loaded by a child component. Data loaders also handle cancellation automatically: if a user starts navigating and then immediately navigates somewhere else, any in-flight request for the first page is cancelled. They can also abort a navigation entirely when a fetch returns an error, similar to how a route guard can redirect or block. The repo is set up with pnpm. Running pnpm install followed by pnpm dev starts the development server.