<script setup lang="ts">
import { api } from '~~/convex/_generated/api'
const convex = useConvex()
onMounted(async () => {
// Direct client access
const result = await convex.query(api.tasks.list)
console.log(result)
})
</script>
| Type | Description |
|---|---|
ConvexClient | The Convex client instance. |
Client-only: The ConvexClient uses WebSockets and only works in the browser. During SSR, useConvex() throws an error.
const convex = useConvex()
// Throws if called when client is unavailable
In most cases, prefer the higher-level composables:
| Use Case | Recommended Composable |
|---|---|
| Fetching data | useConvexQuery |
| Modifying data | useConvexMutation |
| Running actions | useConvexAction |
| Paginated data | useConvexPaginatedQuery |
| Auth state | useConvexAuth |
Use useConvex() when you need:
<script setup lang="ts">
import { api } from '~~/convex/_generated/api'
const convex = useConvex()
const notifications = ref<Notification[]>([])
onMounted(() => {
// Manual subscription with custom handling
const unsubscribe = convex.onUpdate(api.notifications.list, { userId: 'user123' }, (result) => {
notifications.value = result
// Custom logic: play sound, show toast, etc.
if (result.some((n) => n.unread)) {
playNotificationSound()
}
})
onUnmounted(() => {
unsubscribe()
})
})
</script>