docs: must export loader

Close #535

Squashed commit of the following:

commit 41d1780
Author: Eduardo San Martin Morote <[email protected]>
Date:   Mon Jan 27 10:10:35 2025 +0100

    docs: reword

commit 2b9cd36
Author: Eduardo San Martin Morote <[email protected]>
Date:   Mon Jan 27 10:04:38 2025 +0100

    docs: reword

commit c709249
Author: Rick Tibbe <[email protected]>
Date:   Tue Nov 5 12:50:24 2024 +0100

    docs: add information on using loaders outside of page components

Author: posva

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?
 

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()
 </script>
 ```
 
+::: 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.