docs: improvements

Author: posva

docs/.vitepress/config.ts

@@ -153,7 +153,7 @@ function sidebarGuide(): SidebarGroup {
         link: '/guide/auth',
       },
       {
-        text: 'File Storage',
+        text: 'Storage',
         link: '/guide/storage',
       },
       {

docs/guide/auth.md

@@ -41,10 +41,10 @@ import {
 } from 'firebase/auth'
 import { useCurrentUser, useFirebaseAuth } from 'vuefire'
 
-const auth = useFirebaseAuth()! // only exists on client side
+const auth = useFirebaseAuth() // only exists on client side
 
 // display errors if any
-const error = ref<Error | null>(null)
+const error = ref(null)
 function signinRedirect() {
   signInWithRedirect(auth, someAuthProvider).catch((reason) => {
     console.error('Failed signinRedirect', reason)
@@ -83,7 +83,7 @@ const auth = useFirebaseAuth()!
 There are multiple ways to add the auth providers to your app like exporting a `new GoogleAuthProvider()` instance from the file where we initialize Firebase. Another way is to create it directly in the component where you need it. make sure to add it into a regular `<script>` since each `<script setup>` is scoped to a component instance:
 
 ```vue{1-4,17}
-<script lang="ts">
+<script>
 import { GoogleAuthProvider } from 'firebase/auth'
 export const googleAuthProvider = new GoogleAuthProvider()
 </script>
@@ -131,16 +131,18 @@ There is also a `getCurrentUser()` function that returns a promise of the curren
 
 ```ts
 router.beforeEach(async (to) => {
-  // routes with `meta: { requiresAuth: true }` will check for the users, others won't
+  // routes with `meta: { requiresAuth: true }` will check for
+  // the users, others won't
   if (to.meta.requiresAuth) {
     const currentUser = await getCurrentUser()
     // if the user is not logged in, redirect to the login page
     if (!currentUser) {
       return {
         path: '/login',
         query: {
-          // we keep the current path in the query so we can redirect to it after login
-          // with `router.push(route.query.redirect || '/')`
+          // we keep the current path in the query so we can
+          // redirect to it after login with
+          // `router.push(route.query.redirect || '/')`
           redirect: to.fullPath,
         },
       }

docs/guide/realtime-data.md

@@ -386,3 +386,9 @@ const todoList = useDocument(
   })
 )
 ```
+
+::: warning
+
+While you can return pretty much anything in `withConverter()`, **if you are using [SSR](./ssr.md)**, make sure you object is serializable. For example, you can't return custom classes or functions.
+
+:::

docs/guide/ssr.md

@@ -71,14 +71,18 @@ export const install: UserModule = ({ isClient, initialState, app }) => {
 }
 ```
 
-Note that by default, vite-ssg (used by Vitesse) uses `JSON.stringify()` to serialize the state, which is faster but doesn't support some values like `Date` objects and also exposes your application to some attacks **if your data comes from the user**. You can use a custom `transformState` function to handle this:
+Note that by default, vite-ssg (used by Vitesse) uses `JSON.stringify()` to serialize the state, which is faster but doesn't support some values like `TimeStamp` and `GeoPoint` objects and also exposes your application to some attacks **if your data comes from the user**. You can use a custom `transformState` function to handle this:
 
-```ts
+```ts{6-9,18-22}
 // src/main.ts
 // https://github.com/Rich-Harris/devalue#usage
 import devalue from 'devalue'
 import { ViteSSG } from 'vite-ssg'
 import App from './App.vue'
+import {
+  devalueCustomParsers,
+  devalueCustomStringifiers,
+} from 'vuefire'
 
 export const createApp = ViteSSG(
   App,
@@ -88,12 +92,18 @@ export const createApp = ViteSSG(
   },
   {
     transformState(state) {
-      return import.meta.env.SSR ? devalue.stringify(state) : devalue.parse(state)
+      return import.meta.env.SSR
+        ? devalue.stringify(state, devalueCustomStringifiers)
+        : devalue.parse(state, devalueCustomParsers)
     },
-  },
+  }
 )
 ```
 
+::: tip
+This is handled out of the box with the [`nuxt-vuefire` plugin in Nuxt projects](../nuxt/getting-started.md).
+:::
+
 Web Security is a broad topic that we cannot cover here. We recommend you to read these resources to dive deeper:
 
 - [State Serialization in vite-ssg](https://github.com/antfu/vite-ssg#state-serialization)
@@ -147,7 +157,7 @@ import { usePendingPromises } from 'vuefire'
 // this store internally calls `useDocument()` when created
 const quizStore = useQuizStore()
 
-// since `useDocument()` has been called 
+// since `useDocument()` has been called
 await usePendingPromises()
 </script>
 ```
@@ -166,7 +176,7 @@ This only works if you avoid rendering on server these documents or collections.
 
 <!-- TODO: I wonder if we could attach effect scopes to applications so `onServerPrefetch()` is still awaited when attached -->
 
-<!-- 
+<!--
 
 ## Vue Router Data Loaders
 

docs/nuxt/auth.md

@@ -1,6 +1,19 @@
 # Authentication
 
-Nuxt VueFire integrates with [Firebase Authentication](https://firebase.google.com/docs/auth) module to automatically synchronize the current user state on the server and the client.
+Nuxt VueFire integrates with [Firebase Authentication](https://firebase.google.com/docs/auth) module to automatically synchronize the current user state on the server and the client. Activate this module by setting the `vuefire.auth` to `true` in `nuxt.config.ts`:
+
+```ts{5}
+export default defineNuxtConfig({
+  // ...
+  vuefire: {
+    // ensures the auth module is enabled
+    auth: true,
+    config: {
+      // ...
+    }
+  },
+})
+```
 
 You can access the current user with the `useCurrentUser()` composable within any component:
 

docs/nuxt/getting-started.md

@@ -86,7 +86,7 @@ echo service-account.json >> .gitignore
 
 If you are using the [Authentication](https://firebase.google.com/docs/auth) module or [AppCheck](https://firebase.google.com/docs/app-check), make sure to enable them as well:
 
-```ts{3-14}
+```ts{5,6-13}
 export default defineNuxtConfig({
   // ...
   vuefire: {