---
title: "Connection State"
description: "Watch the live WebSocket connection with useConvexConnectionState — connectivity, retries, and in-flight request counters."
canonical_url: "https://nuxt-convex-module.dev/guide/connection-state"
---
# Connection State

> Watch the live WebSocket connection with useConvexConnectionState — connectivity, retries, and in-flight request counters.

`useConvexConnectionState` exposes the Convex client's live `ConnectionState` — the same object powering the status pill in every demo header on this site. It updates whenever any part of the state changes:

<playground-connection>



</playground-connection>

## Read the state

```vue [components/ConnectionPanel.vue]
<script setup lang="ts">
const connection = useConvexConnectionState()
</script>

<template>
  <dl>
    <template v-for="[key, value] in Object.entries(connection)" :key="key">
      <dt>{{ key }}</dt>
      <dd>{{ value }}</dd>
    </template>
  </dl>
</template>
```

## What the state carries

<callout icon="i-lucide-flask-conical">

Experimental — upstream marks the `ConnectionState` shape unstable, and it may change in a minor release; so may `ConvexVueClient.connectionState()` and `.subscribeToConnectionState()`, the methods under this composable. See [experimental symbols](https://nuxt-convex-module.dev/getting-started/introduction#experimental).

</callout>

The composable returns a `ShallowRef<ConnectionState>` with fields like `isWebSocketConnected`, `hasEverConnected`, `connectionCount`, `connectionRetries`, `hasInflightRequests`, `inflightMutations`, `inflightActions`, and `timeOfOldestInflightRequest`. Run the slow action on the [mutations & actions](https://nuxt-convex-module.dev/guide/mutations-and-actions#useaction) page and watch the in-flight counters tick.

<callout icon="i-lucide-unplug">

Try stopping `npx convex dev` — `isWebSocketConnected` flips to `false`, `connectionRetries` starts climbing, and every status pill on this site turns red. Restart it and watch the client reconnect on its own.

</callout>

For the same state plus active subscriptions, auth state, and the client log stream in a panel, see [DevTools](https://nuxt-convex-module.dev/guide/devtools).


## Sitemap

See the full [sitemap](https://nuxt-convex-module.dev/sitemap.md) for all pages.