# 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).
    

(Video content)

Nuxt and [`vue-datocms`](https://github.com/datocms/vue-datocms) together make it easy to use our [Real-time Updates API](https://www.datocms.com/docs/real-time-updates-api.md) to perform such changes, as it only involves adding a composable to your pages.

### How to use the `useQuerySubscription` composable

The [`vue-datocms`](https://github.com/datocms/vue-datocms) package exposes a [`useQuerySubscription`](https://github.com/datocms/vue-datocms/tree/master/src/composables/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:

```html
<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 QUERY = `
  query {
    blogPost {
      title
    }
  }
`;

const { status, error, data } = useQuerySubscription({
  query: QUERY,
  token: config.datocmsApiToken
});
</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>
```

## Related content in "Nuxt"

- [Nuxt + DatoCMS Overview](https://www.datocms.com/docs/nuxt.md)
- [Include draft contents](https://www.datocms.com/docs/nuxt/include-draft-contents-during-development.md)
- [Responsive images](https://www.datocms.com/docs/nuxt/managing-images.md)
- [Displaying videos](https://www.datocms.com/docs/nuxt/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/nuxt/rendering-structured-text-fields.md)
- [Adding SEO to Nuxt pages](https://www.datocms.com/docs/nuxt/seo-management.md)
- [Real-time updates](https://www.datocms.com/docs/nuxt/real-time-updates.md)
- [Visual Editing](https://www.datocms.com/docs/nuxt/visual-editing.md)
- [Nuxt Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official   Nuxt 4](https://www.datocms.com/marketplace/starters/nuxt-starter-kit.md)