Sanity client.listen() not working - "listen is not a function" error
The error you're seeing - "listen is not a function" - is happening because the @nuxtjs/sanity module creates a minimal client by default, and the minimal client doesn't include the listen() method.
The minimal client (similar to picosanity) is designed specifically for fetching content only - it has a smaller bundle size but lacks mutation and real-time listening capabilities.
Solution: Use the full Sanity client
You need to install and use the full @sanity/client package instead of relying on the client from useSanity(). Here's how to fix your code:
// Install the full client
// npm install @sanity/client
import { createClient } from '@sanity/client'
import { useMainStore } from '~/stores/main'
export default async function ({ query, params, livePreview = true }) {
const mainStore = useMainStore()
const sanityClient = mainStore.previewIsActive
? {
client: 'preview',
server: false,
initialCache: false,
}
: undefined
// Create a full client instance with listen() support
const previewClient = createClient({
projectId: 'your-project-id',
dataset: 'your-dataset-name',
useCdn: false, // Important for preview/draft content
apiVersion: '2025-02-06',
token: process.env.SANITY_TOKEN, // Required for preview mode
perspective: 'previewDrafts' // To see draft content
})
// live preview: listen to changes
onMounted(() => {
if (mainStore.previewIsActive && livePreview) {
previewClient.listen(query, params).subscribe((event) => {
setTimeout(() => {
refresh()
}, 900)
})
}
})
// get data using the Nuxt composable
const { data, refresh } = await useLazySanityQuery(
query,
params,
sanityClient
)
return data
}Modern Alternative: Consider the Live Content API
If you're building a modern Nuxt app, you might want to consider using Sanity's Live Content API instead of listen(). It provides real-time updates without websockets and works seamlessly with Nuxt through framework loaders. This is the recommended approach for new projects as it handles caching and updates more efficiently.
The key takeaway: the useSanity('preview') composable from @nuxtjs/sanity gives you a minimal client that can't listen to real-time changes. You need the full @sanity/client for that functionality.
Show original thread4 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.