From dd25f595b1d7a5200ae40e8cc07648782de60571 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 27 Jan 2025 10:02:47 +0100
Subject: [PATCH] docs: file names

---
 docs/data-loaders/index.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/data-loaders/index.md b/docs/data-loaders/index.md
index f3151a6fe..25266360a 100644
--- a/docs/data-loaders/index.md
+++ b/docs/data-loaders/index.md
@@ -2,7 +2,7 @@
 
 Data loaders streamline any asynchronous state management with Vue Router, like **Data Fetching**. Adopting Data loaders ensures a consistent and efficient way to manage data fetching in your application. Keep all the benefits of using libraries like [Pinia Colada](./colada/) or [Apollo](./apollo/) and integrate them seamlessly with client-side navigation.
 
-This is achieved by extracting the loading logic **outside** of the component `setup` (unlike `<Suspense>`). This way, the loading logic can be executed independently of the component lifecycle, and the component can focus on rendering the data. Data Loaders are automatically collected and awaited within a navigation guard, ensuring the data is ready before rendering the component.
+This is achieved by extracting the loading logic **outside** of the component `setup` (unlike `<Suspense>`). This way, the loading logic can be executed independently of the component life cycle, and the component can focus on rendering the data. Data Loaders are automatically collected and awaited within a navigation guard, ensuring the data is ready before rendering the component.
 
 ## Features
 
@@ -46,9 +46,11 @@ There are different data loaders implementation, the most simple one is the [Bas
 
 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:
+To get started, _define_ and _**export**_ a loader from a **page** component:
 
-```vue{2,5-7,11-16} twoslash
+::: code-group
+
+```vue{2,5-7,11-16} twoslash [src/pages/users/[id].vue]
 <script lang="ts">
 import 'unplugin-vue-router/client'
 import './typed-router.d'
@@ -84,6 +86,8 @@ const {
 </template>
 ```
 
+:::
+
 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.