N
Nuxt•3mo ago
plex

Force refresh after new deployment? [Vercel]

I'd like to force reload the Nuxt app (in Universal mode) of every user after I've deployed a new version. As far as I understand there is an auto-reload if a chunk file is 404, but that's not always the case. What would be a good way to implement this? A manual trigger would be fine.
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @plex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To force a refresh of your Nuxt app for all users after a new deployment (such as on Vercel), you have a few options based on the official Nuxt documentation and recent improvements: 1. Automatic Reload on Chunk Errors Nuxt can automatically reload the app if a chunk fails to load (which often happens after a deployment when users have an old version open). This is controlled by the emitRouteChunkError option in your nuxt.config: 
export default defineNuxtConfig({
  experimental: {
    emitRouteChunkError: 'automatic' // or 'automatic-immediate'
  }
})
export default defineNuxtConfig({
  experimental: {
    emitRouteChunkError: 'automatic' // or 'automatic-immediate'
  }
})
- "automatic": Reloads the route when a chunk fails to load during navigation. - "automatic-immediate": Triggers an immediate reload as soon as a chunk error is detected, even before navigation. This helps in most cases, but as you mentioned, it only triggers if a chunk is missing or fails to load, which may not cover all deployment scenarios Docs: emitRouteChunkError. 2. Manual Trigger with reloadNuxtApp For a manual or programmatic approach, you can use the reloadNuxtApp utility to force a hard reload for users. This can be triggered based on your own logic (e.g., polling an endpoint, listening for a WebSocket event, or checking a version file): 
import { reloadNuxtApp } from '#app'

reloadNuxtApp()
import { reloadNuxtApp } from '#app'

reloadNuxtApp()
This will perform a hard reload of the app, re-requesting the page and its dependencies from the server. You can also customize its behavior with options like path, ttl, force, and persistState Docs: reloadNuxtApp. 3. Custom Implementation A common pattern is to expose a version endpoint or static file (e.g., /version.json) that your client app periodically checks. If the version changes, you call reloadNuxtApp() to force a reload for the user. This is not detailed in the provided sources, but the mechanism for reloading is covered. --- Summary:
- Use emitRouteChunkError for automatic reloads on chunk errors. - Use reloadNuxtApp() for manual or programmatic reloads. - Combine with a version check for a robust solution. Let me know if you need a code example for a version-checking approach using reloadNuxtApp. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@692412885678293578> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?