Connection State

Use useConvexConnectionState when you want to show connectivity status or pause parts of the UI while the realtime client is offline.

Read the connection state

<script setup lang="ts">
import { useConvexConnectionState } from 'vue-convex'

const { state, isConnected } = useConvexConnectionState()
</script>

<template>
  <div v-if="!isConnected" class="banner">
    Reconnecting...
  </div>
</template>

What the composable gives you

• state exposes the underlying Convex ConnectionState object, or null when no realtime client is connected
• isConnected is a convenience computed that maps to state.value?.isWebSocketConnected

Useful fields on state.value include:

• isWebSocketConnected
• hasInflightRequests
• hasEverConnected
• connectionCount
• inflightMutations

Verify the result

The connection-state wiring is working when:

• isConnected reflects the current socket state
• disconnecting the client updates your UI
• reconnecting clears the offline indicator

Next steps

• Read Controller if your app connects and disconnects explicitly
• Read useConvexConnectionState for the exact return type