Auto-reload page when chunk assets are not found or failed to import in Vue.js

router.ts

import { createRouter, createWebHistory } from 'vue-router';
import routes from '~pages';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes,
});


router.onError((err) => {
  const messages = [
    'Importing a module script failed', // safari
    'Failed to fetch dynamically imported module' // edge & chrome
  ];

  if (messages.some((message) => err?.message.includes(message))) {
    router.go(0);

    return;
  }
});

export default router;

Useful links :

• https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/plugins/chunk-reload.client.ts
• nuxt/nuxt#19086
• nuxt/nuxt#19038
• nuxt/nuxt#14594