In this page

    Vue.js/Nuxt.js > Real-time updates

    Real-time updates

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

    • Content-editors in Preview Mode can see drafts directly in the production 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).

    Thanks to the subscribeToQuery helper provided by the datocms-listen package you can get real-time updates for the page when the content changes. This helper connects to the DatoCMS's Real-time Updates API to receive the updated query results in real-time, and is able to reconnect in case of network failures.

    Live updates are great both to get instant previews of your content while editing it inside DatoCMS, or to offer real-time updates of content to your visitors (ie. news site).


    Please consult the datocms-listen package documentation to learn more about how to configure subscribeToQuery.

    The subscription can be created inside of the mounted lifecycle method. Please refer to the query-subscription example for a sample implementation.

    Of course, in Vue.js v3 you can implement a custom hook to wrapssubscribeToQuery and make to make the whole process more idiomatic. For a suggestion on how to proceed, you can mimic the implementation of the React hook.