Nuxt Starter Kit
Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.
Sorry, no results found for "".
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 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>