Add documentation useBrowserStorage

README.md

@@ -3,7 +3,7 @@
 
 [![build](https://github.com/mubaidr/vite-vue3-browser-extension-v3/actions/workflows/build.yml/badge.svg)](https://github.com/mubaidr/vite-vue3-browser-extension-v3/actions/workflows/build.yml)
 
-A [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.chrome.com/docs/extensions/reference/), [FireFox](https://addons.mozilla.org/en-US/developers/), etc.) starter template based on `manifest 3`, `vue3` and `vite` and alot more preconfigured.
+A [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.chrome.com/docs/extensions/reference/), [FireFox](https://addons.mozilla.org/en-US/developers/), etc.) starter template based on `manifest 3`, `vue3` and `vite` and a lot more pre-configured.
 
 ## Screenshots
 
@@ -40,15 +40,16 @@ A [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.c
   - Error Boundary
   - Empty State
   - Notifications using `notivue`
-- Store for options preconfigured etc
+- Store for options pre-configured etc
 - Composables for
   - i18n
   - Theme
   - Notifications
   - Loading
   - Error handling
   - `useBrowserStorage` for extension settings and user options management
-- Preconfigured Pinia Store (optional perisitent and non-persistent)
+  -
+- pre-configured Pinia Store (optional persistent and non-persistent)
   - System wide
   - Easily extendable
   - Type safe
@@ -96,6 +97,38 @@ _Please create an issue if you feel some feature is missing or could be improved
 └── package.json         # Project dependencies and scripts
 ```
 
+## Examples
+
+### `useBrowserStorage`
+
+```ts
+
+// Example usage
+const exampleUsage = () => {
+  // Using sync storage
+  const { data: syncSettings } = useBrowserSyncStorage('settings', {
+    theme: 'dark',
+    notifications: true,
+    preferences: {
+      language: 'en',
+      fontSize: 14
+    }
+  })
+
+  // Using local storage
+  const { data: userProfile } = useBrowserLocalStorage('profile', {
+    name: 'John Doe',
+    lastLogin: null,
+    favorites: ['item1', 'item2']
+  })
+
+  // The data ref can be used directly in templates or watched
+  console.log(syncSettings.value.theme) // 'dark'
+  console.log(userProfile.value.name) // 'John Doe'
+}
+
+```
+
 ## Development tools
 
 ### Vite Plugins
@@ -189,8 +222,8 @@ I am a full stack developer. I am open to work. If you are looking for a develop
 
 <!-- readme: collaborators,contributors -start -->
 <table>
-	<tbody>
-		<tr>
+ <tbody>
+  <tr>
             <td align="center">
                 <a href="https://github.com/mubaidr">
                     <img src="https://avatars.githubusercontent.com/u/2222702?v=4" width="100;" alt="mubaidr"/>
@@ -233,16 +266,16 @@ I am a full stack developer. I am open to work. If you are looking for a develop
                     <sub><b>hi2code</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+  </tr>
+  <tr>
             <td align="center">
                 <a href="https://github.com/justorez">
                     <img src="https://avatars.githubusercontent.com/u/17308328?v=4" width="100;" alt="justorez"/>
                     <br />
                     <sub><b>Null</b></sub>
                 </a>
             </td>
-		</tr>
-	<tbody>
+  </tr>
+ <tbody>
 </table>
 <!-- readme: collaborators,contributors -end -->

package.json

@@ -1,28 +1,28 @@
 {
   "dependencies": {
-    "marked": "^15.0.6",
+    "marked": "^15.0.7",
     "notivue": "^2.4.5",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",
-    "vue-i18n": "^11.1.0",
+    "vue-i18n": "^11.1.1",
     "vue-router": "^4.5.0",
     "webextension-polyfill": "^0.12.0"
   },
   "description": "A Vue 3 + Vite project for building Chrome extensions",
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.28",
     "@eslint/compat": "^1.2.6",
-    "@eslint/js": "^9.19.0",
+    "@eslint/js": "^9.20.0",
     "@iconify-json/carbon": "^1.2.6",
-    "@iconify-json/lucide": "^1.2.25",
+    "@iconify-json/lucide": "^1.2.26",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.2",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.0.4",
+    "@tailwindcss/postcss": "^4.0.5",
     "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.0.4",
+    "@tailwindcss/vite": "^4.0.5",
     "@types/eslint": "^9.6.1",
     "@types/eslint__js": "~8.42.3",
     "@types/node": "^22.13.1",
@@ -37,15 +37,15 @@
     "cross-env": "^7.0.3",
     "daisyui": "^5.0.0-beta.7",
     "dotenv": "^16.4.7",
-    "eslint": "^9.19.0",
+    "eslint": "^9.20.0",
     "eslint-plugin-vue": "^9.32.0",
     "get-installed-browsers": "^0.1.7",
     "globals": "^15.14.0",
     "postcss": "^8.5.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.0",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "sass": "^1.84.0",
-    "tailwindcss": "^4.0.4",
+    "tailwindcss": "^4.0.5",
     "terser": "^5.38.1",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
@@ -74,14 +74,18 @@
     "overrides": {},
     "peerDependencyRules": {
       "allowAny": [],
-      "allowedDeprecatedVersions": {
-        "sourcemap-codec": "1.4.8"
-      },
       "allowedVersions": {
         "node-fetch": "*"
       },
       "ignoreMissing": []
-    }
+    },
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "protobufjs",
+      "spawn-sync",
+      "vue-demi"
+    ]
   },
   "private": true,
   "repository": {