Nuxt > 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) {
    title
  }
}`;
const { status, error, data } = useQuerySubscription({
  query: HOMEPAGE_QUERY,
  variables: { first: 10 },
  token: runtimeConfig.public.datoCmsToken,
});
</script>
<template>
  <div>
    <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>
    <div v-if="data">{{ JSON.stringify(data, null, 2) }}</div>
  </div>
</template>