From 75d7ff4ed1dc05976e44c7b8f8abefc39f5e955f Mon Sep 17 00:00:00 2001
From: David Stack <2013388+davidstackio@users.noreply.github.com>
Date: Sun, 3 Aug 2025 20:09:50 -0400
Subject: [PATCH 1/5] docs: add missing import to example

---
 docs/guide/storage.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/storage.md b/docs/guide/storage.md
index 7e641d30..3330430e 100644
--- a/docs/guide/storage.md
+++ b/docs/guide/storage.md
@@ -79,7 +79,7 @@ VueFire also exposes a smaller composable that only retrieves the url of a file.
 <script setup lang="ts">
 import { useFileDialog } from '@vueuse/core'
 import { ref as storageRef } from 'firebase/storage'
-import { useFirebaseStorage, useStorageFile } from 'vuefire'
+import { useFirebaseStorage, useStorageFile, useStorageFileUrl } from 'vuefire'
 
 const storage = useFirebaseStorage()
 const mountainFileRef = storageRef(storage, 'images/mountains.jpg')

From 1786afa7b9c837ac83ae7295fa148853fb77f38b Mon Sep 17 00:00:00 2001
From: David Stack <2013388+davidstackio@users.noreply.github.com>
Date: Tue, 5 Aug 2025 18:44:33 -0400
Subject: [PATCH 2/5] docs: remove unused imports and add code highlighting

---
 docs/guide/storage.md | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/docs/guide/storage.md b/docs/guide/storage.md
index 3330430e..a6a618fa 100644
--- a/docs/guide/storage.md
+++ b/docs/guide/storage.md
@@ -12,7 +12,7 @@ You can access the Firebase Storage from within any component with the composabl
 
 You can upload and monitor the progress of a file upload with the `useStorageFile()` composable. This also exposes the URL of the file once it's uploaded and its metadata, let's start with a full example of a form upload:
 
-```vue
+```vue{4,?}
 <script setup lang="ts">
 // See https://vueuse.org/core/useFileDialog
 import { useFileDialog } from '@vueuse/core'
@@ -75,11 +75,10 @@ Once the picture is uploaded, you can use the `url` reactive variable. For examp
 
 VueFire also exposes a smaller composable that only retrieves the url of a file. This is useful if you don't need to upload a file but only display it:
 
-```vue
+```vue{4,?}
 <script setup lang="ts">
-import { useFileDialog } from '@vueuse/core'
 import { ref as storageRef } from 'firebase/storage'
-import { useFirebaseStorage, useStorageFile, useStorageFileUrl } from 'vuefire'
+import { useFirebaseStorage, useStorageFileUrl } from 'vuefire'
 
 const storage = useFirebaseStorage()
 const mountainFileRef = storageRef(storage, 'images/mountains.jpg')
@@ -95,9 +94,8 @@ const {
 
 The same way you can access the file URL you can also access the file metadata. You can also use the `update()` function to update the metadata and keep the reactive variable up to date:
 
-```vue
+```vue{4,?}
 <script setup lang="ts">
-import { useFileDialog } from '@vueuse/core'
 import { ref as storageRef } from 'firebase/storage'
 import { useFirebaseStorage, useStorageFile } from 'vuefire'
 

From 175c55a78bd3b94a30bdfb831b6b0bf5260bc782 Mon Sep 17 00:00:00 2001
From: David Stack <2013388+davidstackio@users.noreply.github.com>
Date: Tue, 5 Aug 2025 23:50:37 -0400
Subject: [PATCH 3/5] docs: polish storage page

---
 docs/guide/storage.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/guide/storage.md b/docs/guide/storage.md
index a6a618fa..a1d1978b 100644
--- a/docs/guide/storage.md
+++ b/docs/guide/storage.md
@@ -1,6 +1,6 @@
 # Firebase Storage
 
-[Firebase Storage](https://firebase.google.com/docs/storage/web/start) is a cloud storage service for Firebase. It allows you to store and serve user-generated content like images, audio, video, and other files. While most of the APIs can be used as you would normally do with Firebase, VueFire exposes a few composables to integrate better with Vue that not only give you access to reactive variables but also to some actions like `upload()` to update a file while keeping the reactive variable up to date at the same time.
+[Firebase Storage](https://firebase.google.com/docs/storage/web/start) is a cloud storage service for Firebase. It allows you to store and serve user-generated content like images, audio, video, and other files. While most of the APIs can be used as you would normally do with Firebase, VueFire exposes a few composables to integrate better with Vue. These not only give you access to reactive variables, but also to some actions like `upload()` which updates a file while also keeping the reactive variable up to date.
 
 ## Installation
 
@@ -10,9 +10,9 @@ You can access the Firebase Storage from within any component with the composabl
 
 ## Uploading Files
 
-You can upload and monitor the progress of a file upload with the `useStorageFile()` composable. This also exposes the URL of the file once it's uploaded and its metadata, let's start with a full example of a form upload:
+To upload and monitor the upload progress of a file, use the `useStorageFile()` composable. This will expose the URL and metadata of the file once it's uploaded. Here's a full example of a form upload:
 
-```vue{4,?}
+```vue{5,18}
 <script setup lang="ts">
 // See https://vueuse.org/core/useFileDialog
 import { useFileDialog } from '@vueuse/core'
@@ -73,9 +73,9 @@ Once the picture is uploaded, you can use the `url` reactive variable. For examp
 
 ## Downloading Files
 
-VueFire also exposes a smaller composable that only retrieves the url of a file. This is useful if you don't need to upload a file but only display it:
+To get the download URL for a file, use the `useStorageFileUrl()` composable. This is useful if you only need to display a file:
 
-```vue{4,?}
+```vue{3,11}
 <script setup lang="ts">
 import { ref as storageRef } from 'firebase/storage'
 import { useFirebaseStorage, useStorageFileUrl } from 'vuefire'
@@ -92,12 +92,12 @@ const {
 
 ## File metadata
 
-The same way you can access the file URL you can also access the file metadata. You can also use the `update()` function to update the metadata and keep the reactive variable up to date:
+To access the file metadata, use the `useStorageFileMetadata()` composable. You can use the `update()` function to keep the metadata and reactive variable up to date:
 
-```vue{4,?}
+```vue{3,13}
 <script setup lang="ts">
 import { ref as storageRef } from 'firebase/storage'
-import { useFirebaseStorage, useStorageFile } from 'vuefire'
+import { useFirebaseStorage, useStorageFileMetadata } from 'vuefire'
 
 const storage = useFirebaseStorage()
 const mountainFileRef = storageRef(storage, 'images/mountains.jpg')

From febda2908b03c40e537a6b5d1a4b6280429eaef5 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva@users.noreply.github.com>
Date: Thu, 7 Aug 2025 10:11:37 +0200
Subject: [PATCH 4/5] Apply suggestion from @posva

---
 docs/guide/storage.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/storage.md b/docs/guide/storage.md
index a1d1978b..24c04c8d 100644
--- a/docs/guide/storage.md
+++ b/docs/guide/storage.md
@@ -73,7 +73,7 @@ Once the picture is uploaded, you can use the `url` reactive variable. For examp
 
 ## Downloading Files
 
-To get the download URL for a file, use the `useStorageFileUrl()` composable. This is useful if you only need to display a file:
+To get the download URL for a file, use the `useStorageFileUrl()` composable. This is useful if you **only** need to display a file:
 
 ```vue{3,11}
 <script setup lang="ts">

From 8903d021b7958af4067e588bceaba34292d32c7a Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva@users.noreply.github.com>
Date: Thu, 7 Aug 2025 10:11:44 +0200
Subject: [PATCH 5/5] Apply suggestion from @posva

---
 docs/guide/storage.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/storage.md b/docs/guide/storage.md
index 24c04c8d..bdfbb805 100644
--- a/docs/guide/storage.md
+++ b/docs/guide/storage.md
@@ -92,7 +92,7 @@ const {
 
 ## File metadata
 
-To access the file metadata, use the `useStorageFileMetadata()` composable. You can use the `update()` function to keep the metadata and reactive variable up to date:
+To **only** access the file metadata, use the `useStorageFileMetadata()` composable. You can use the `update()` function to keep the metadata and reactive variable up to date:
 
 ```vue{3,13}
 <script setup lang="ts">