<script setup lang="ts">
import { api } from '~/convex/_generated/api'
const convex = useConvex()
onMounted(async () => {
if (convex) {
// Direct client access
const result = await convex.query(api.tasks.list)
console.log(result)
}
})
</script>
| Type | Description |
|---|---|
ConvexClient | null | The Convex client instance, or null during SSR |
Client-only: The ConvexClient uses WebSockets and only works in the browser. During SSR, useConvex() returns null.
const convex = useConvex()
// Always check for null when using outside onMounted
if (convex) {
// Safe to use
}
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(() => {
if (!convex) return
// 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>