docs(advanced): realtime example

Author: larbish

docs/content/3.usage/1.composables.md

@@ -62,7 +62,6 @@ Here is an example of a fetch using the `select` method with Nuxt 3 [useAsyncDat
 
 ```vue
 <script setup lang="ts">
-const user = useSupabaseUser()
 const client = useSupabaseClient()
 
 const { data: restaurant } } = await useAsyncData('restaurant', async () => {

docs/content/4.advanced.md

@@ -3,6 +3,39 @@ title: Advanced
 description: 'Real-life advanced usages of the supabase module.'
 ---
 
+## Realtime
+
+Based on [Supabase Realtime](https://github.com/supabase/realtime), listen to changes in your PostgreSQL Database and broadcasts them over WebSockets. 
+
+To enable it, make sure you have turned on the [Real Time API](https://supabase.com/docs/guides/api#realtime-api-1) for your table.
+
+Then, listen to changes directly in your vue page / component:
+
+```vue
+<script setup lang="ts">
+import type { RealtimeSubscription } from '@supabase/supabase-js'
+
+const client = useSupabaseClient()
+let subscription: RealtimeSubscription
+
+// Fetch collaborators and get the refresh method provided by useAsyncData
+const { data: collaborators, refresh: refreshCollaborators } = await useAsyncData('collaborators', async () => {
+  const { data } = await client.from('collaborators').select('name')
+  return data
+})
+
+// Once page is mounted, listen to changes on the `collaborators` table and refresh collaborators when receiving event
+subscription = client.from('collaborators').on('*', () => {
+  refreshCollaborators()
+}).subscribe()
+
+// Don't forget to unsubscribe when user left the page
+onUnmounted(() => {
+  client.removeSubscription(subscription)
+})
+</script>
+```
+
 ## Auth middleware
 
 You can protect your authenticated routes by creating a custom composable in your project, here is an example: