Hot Reloading Content in Craft CMS’s Live Preview and Nuxt

A few days ago, I stumbled upon Aaron Bushnell’s blog post about hot reloading content in Craft CMS’s Live Preview. It grabbed my attention right away! I decided to try it out with Nuxt, and here’s what I discovered.

If you come across a Medium paywall, you can read the blog for free here. Just click the link and access the content without any restrictions.

How it works

1. Disable auto-refresh for preview targets
   Since Craft 3.4, you can turn off automatic refreshing in your preview target settings. Check out this feature request for more details.
2. Notify the frontend when an entry changes
   We’ll add a bit of Control Panel JavaScript that sends a postMessage event to the frontend whenever the entry is updated.
3. Listen and refresh
   On the frontend, we’ll catch those messages and automatically refresh the relevant parts of the page.

Disable auto refresh

First, let’s turn off the hard refresh for preview targets. In your section settings, simply uncheck the Refresh box:

Notify the frontend

Next, we need to let the frontend know when the entry changes. Whenever you update the entry, it should send a message to the…