From 84818e435a61c110823b25f9c1333b73cada49f9 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 27 Jan 2025 10:11:15 +0100 Subject: [PATCH] docs: must export loader Close #535 Squashed commit of the following: commit 41d1780e4896130bcc1a48a51964add9ce2a281d Author: Eduardo San Martin Morote Date: Mon Jan 27 10:10:35 2025 +0100 docs: reword commit 2b9cd36d7a4612a9c1cbea709237905bdccc37c7 Author: Eduardo San Martin Morote Date: Mon Jan 27 10:04:38 2025 +0100 docs: reword commit c709249cf445dcce0a13e8ac4779a708a276f644 Author: Rick Tibbe Date: Tue Nov 5 12:50:24 2024 +0100 docs: add information on using loaders outside of page components --- docs/data-loaders/index.md | 4 ++-- docs/data-loaders/organization.md | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) 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.