docs: nuxt

Author: posva

docs/.vitepress/config.ts

@@ -187,8 +187,16 @@ function sidebarNuxt(): SidebarGroup {
         link: '/nuxt/getting-started',
       },
       {
-        text: 'Config',
-        link: '/nuxt/config',
+        text: 'Authentication',
+        link: '/nuxt/auth',
+      },
+      {
+        text: 'Server Side Rendering',
+        link: '/nuxt/ssr',
+      },
+      {
+        text: 'Deployment',
+        link: '/nuxt/deployment',
       },
     ],
   }

docs/nuxt/auth.md

@@ -0,0 +1,63 @@
+# 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.
+
+You can access the current user with the `useCurrentUser()` composable within any component:
+
+```vue{2}
+<script setup>
+const user = useCurrentUser()
+</script>
+```
+
+You can also await for the user to be ready in route middleware and other async functions with `getCurrentUser()`. For example, you can create a custom route middleware that only allows authenticated users to access a route:
+
+```ts
+// middleware/auth.ts
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const user = await getCurrentUser()
+
+  // redirect the user to the login page
+  if (!user) {
+    return navigateTo({
+      path: '/login',
+      query: {
+        redirect: to.fullPath,
+      },
+    })
+  }
+})
+```
+
+You can then enable this middleware on any `page/` component:
+
+```vue{2-4}
+<script setup>
+definePageMeta({
+  middleware: ['auth'],
+})
+</script>
+```
+
+You can even automatically handle the auth state by _watching_ the current user. We recommend you to do this either in a layout or on the `app.vue` component so the watcher is always active:
+
+```vue
+<script setup>
+const router = useRouter()
+const route = useRoute()
+const user = useCurrentUser()
+
+// we don't need this watcher on server
+onMounted(() => {
+  watch(user, (user, prevUser) => {
+    if (prevUser && !user) {
+      // user logged out
+      router.push('/login')
+    } else if (user && typeof route.query.redirect === 'string') {
+      // user logged in
+      router.push(route.query.redirect)
+    }
+  })
+})
+</script>
+```

docs/nuxt/config.md renamed to docs/nuxt/deployment.md

@@ -1,16 +1,16 @@
 # Nuxt.js
 
 ::: warning
-The Nuxt module and this docs are a WIP. Things might not work yet.
+The Nuxt VueFire module is still a work in progress and it might contain breaking changes in the future. If you find any issues, please open an issue on GitHub.
 :::
 
 ## Installation
 
 ```bash
-npm install nuxt-vuefire
+npm install vuefire nuxt-vuefire
 ```
 
-Additionally, if you are using [SSR](https://nuxt.com/docs/api/configuration/nuxt-config/#ssr), you need to install `firebase-admin` and some other peer dependencies:
+Additionally, if you are using [SSR](https://nuxt.com/docs/api/configuration/nuxt-config/#ssr), you need to install `firebase-admin` and its peer dependencies:
 
 ```bash
 npm install firebase-admin @firebase/@app-types
@@ -20,7 +20,7 @@ npm install firebase-admin @firebase/@app-types
 
 Next, add `nuxt-vuefire` to the `modules` section of `nuxt.config.js` and configure it with the credentials created in your app settings in your project overview (`https://console.firebase.google.com/project/YOUR_PROJECT_NAME/overview)`. You can find more details [in Firebase Documentation](https://firebase.google.com/docs/web/setup#create-project). It should look something like this:
 
-```ts
+```ts{4,7-15}
 export default defineNuxtConfig({
   modules: [
     // ... other modules
@@ -41,7 +41,7 @@ export default defineNuxtConfig({
 
 If you are using SSR with any auth related feature, you will need to create a [service account](https://firebase.google.com/support/guides/service-accounts) and provide a path to the credentials file in the `serviceAccount` property:
 
-```ts
+```ts{5}
 export default defineNuxtConfig({
   vuefire: {
     // ...
@@ -55,3 +55,29 @@ export default defineNuxtConfig({
 :::tip
 This service account file contains sensitive information and should **not be committed to your repository**.
 :::
+
+### Additional configuration
+
+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}
+export default defineNuxtConfig({
+  // ...
+  vuefire: {
+    // ensures the auth module is enabled
+    auth: true,
+    appCheck: {
+      // Allows you to use a debug token in development
+      debug: process.env.NODE_ENV !== 'production',
+      isTokenAutoRefreshEnabled: true,
+      provider: 'ReCaptchaV3',
+      // Find the instructions in the Firebase documentation, link above
+      key: '...',
+    },
+  },
+})
+```
+
+## Auto imports
+
+Nuxt VueFire will automatically import the most commonly used functions of `vuefire` so you don't even need to import them in your components ✨.

docs/nuxt/getting-started.md

@@ -0,0 +1,5 @@
+# Server Side Rendering
+
+Nuxt VueFire works both with and without SSR. You don't need to do anything special to make it work with SSR, everything is handled automatically.
+
+You can read more about SSR in the [VueFire SSR page](../guide/ssr)