Live Content API
The Live Content API allows your app to subscribe to changes in your Sanity dataset and receive updates whenever documents are created, updated, or deleted.
This is ideal for fast-moving content like news, sports, or commerce.
v2021-03-25 or later.Usage
When live content is enabled in your Nuxt config, the module will automatically handle subscribing to live updates for you. You do not need to manually subscribe to events or use a custom composable.
Install Sanity Client
Make sure you have the latest @sanity/client:
pnpm add @sanity/client
Enable Live Content
Configure your Nuxt module to enable live content:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/sanity'],
sanity: {
projectId: '<your-project-id>',
dataset: '<your-dataset>',
apiVersion: '2021-03-25',
liveContent: {
browserToken: process.env.NUXT_SANITY_LIVE_BROWSER_TOKEN,
serverToken: process.env.NUXT_SANITY_LIVE_SERVER_TOKEN,
},
},
})
Querying Live Content
Use the built-in useSanityQuery composable. Live updates are handled automatically — no need to manually subscribe or use a custom composable.
<script setup lang="ts">
const { data, refresh, pending, error } = useSanityQuery(
'*[_type == "post"] | order(_createdAt desc)'
)
</script>
<template>
<div v-if="data">
<div v-for="post in data" :key="post._id">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>
datais a ref that will update automatically when content changes in Sanity.refreshcan be called to manually re-fetch.pendinganderrorare also available.
Advanced: Manual Live Mode Control
If you need to manually enable or disable live mode (rare for most users), you can use the useSanityLiveMode composable:
<script setup>
const disable = useSanityLiveMode()
// Call disable() to turn off live mode if needed
</script>