Nuxt > Real-time updates

    Real-time updates

    Live updates are useful both for content editors and the regular visitors of your app/website:

    • Content-editors in can see drafts directly in the website, without having to refresh the page;

    • Visitors can immediately see new content as it gets published, allowing all kinds of real-time interactions with your website/app (ie. live-news coverage).

    Nuxt and vue-datocms together make it easy to use our Real-time Updates API to perform such changes, as it only involves adding a composable to your pages.

    How to use the useQuerySubscription composable

    The vue-datocms package exposes a useQuerySubscription function that makes it trivial to make any Nuxt page updated in real-time. The composable works by streaming any changes to the GraphQL response to the browser.

    The following code shows a complete example that activates real-time updates for any visitor of your website:

    <script setup>
    import { useQuerySubscription } from "vue-datocms";
    const statusMessage = {
    connecting: 'Connecting to DatoCMS...',
    connected: 'Connected to DatoCMS, receiving live updates!',
    closed: 'Connection closed',
    const runtimeConfig = useRuntimeConfig();
    const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
    allBlogPosts(first: $limit) {
    const { status, error, data } = useQuerySubscription({
    query: HOMEPAGE_QUERY,
    variables: { first: 10 },
    token: runtimeConfig.public.datoCmsToken,
    <p>Connection status: {{ statusMessage[status] }}</p>
    <div v-if="error">
    <h1>Error: {{ error.code }}</h1>
    <div>{{ error.message }}</div>
    <pre v-if="error.response">{{ JSON.stringify(error.response, null, 2) }}</pre>
    <div v-if="data">{{ JSON.stringify(data, null, 2) }}</div>