diff --git a/docs/data-loaders/index.md b/docs/data-loaders/index.md index 25266360a..9e1858014 100644 --- a/docs/data-loaders/index.md +++ b/docs/data-loaders/index.md @@ -44,7 +44,7 @@ app.mount('#app') There are different data loaders implementation, the most simple one is the [Basic Loader](./basic/) which always reruns data fetching. A more efficient one, is the [Colada Loader](./colada/) which uses [@pinia/colada](https://github.com/posva/pinia-colada) under the hood. In the following examples, we will be using the _basic loader_. -Loaders are [composables](https://vuejs.org/guide/reusability/composables.html) defined through a `defineLoader` function like `defineBasicLoader` or `defineColadaLoader`. They are _used_ in the component `setup` to extract the needed information. +Loaders are [composables](https://vuejs.org/guide/reusability/composables.html) defined through a `defineLoader` function like `defineBasicLoader` or `defineColadaLoader`. They are _used_ in the component `setup` to extract the needed information. To get started, _define_ and _**export**_ a loader from a **page** component: @@ -90,7 +90,7 @@ const { The loader will automatically run when the route changes, for example when navigating to `/users/1`, even when coming from `/users/2`, the loader will fetch the data and delay the navigation until the data is ready. -On top of that, you are free to _reuse_ the returned composable `useUserData` in any other component, and it will automatically share the same data fetching instance. +On top of that, you are free to _reuse_ the returned composable `useUserData` in any other component, and it will automatically share the same data fetching instance. You can even [organize your loaders in separate files](./organization.md) as long as you **export** the loader from a **page** component. ## Why Data Loaders? diff --git a/docs/data-loaders/organization.md b/docs/data-loaders/organization.md index d8020f2fc..f992c70c8 100644 --- a/docs/data-loaders/organization.md +++ b/docs/data-loaders/organization.md @@ -47,7 +47,7 @@ When using this pattern, remember to **export the loader** in all the page compo ## Usage outside of page components -Until now, we have only seen loaders used in page components. However, one of the benefits of using loaders is that they can be **reused in many part of your application**, just like regular composables. This will not only eliminate code duplication but also ensure an optimal and performant data fetching by **deduplicating requests and sharing the data**. +Until now, we have only seen loaders used in page components. However, one of the benefits of using loaders is that they can be **reused in many parts of your application**, just like regular composables. This will not only eliminate code duplication but also ensure an optimal and performant data fetching by **deduplicating requests and sharing the data**. To use a loader outside of a page component, you can simply **import it** and use it like any other composable, without the need to export it. @@ -60,6 +60,12 @@ const { data: issues } = useProjectIssues() ``` +::: tip + +When using a loader in a non-page component, you must **export the loader** from the page components where it is used. If you only import and use the loader in a regular component, the router will not recognize it and won't trigger or await it during navigation. + +::: + ## Nested Routes When defining nested routes, you don't need to worry about exporting the loader in both the parent and the child components. This will be automatically optimized for you and the loader will be shared between the parent and the child components.