fix(nuxt): defer registering inp handler until nuxt is mounted

danielroe · danielroe · commit 866a5319a30f · 2024-06-24T23:44:32.000+02:00
diff --git a/packages/nuxt/src/app/plugins/navigation-repaint.client.ts b/packages/nuxt/src/app/plugins/navigation-repaint.client.ts
@@ -1,19 +1,23 @@
 import { defineNuxtPlugin } from '../nuxt'
-import { useRouter } from '../composables'
+import { onNuxtReady } from '../composables/ready'
+import { useRouter } from '../composables/router'
 
 export default defineNuxtPlugin(() => {
-  useRouter().beforeResolve(async () => {
-    /**
-     * This gives an opportunity for the browser to repaint, acknowledging user interaction.
-     * It can reduce INP when navigating on prerendered routes.
-     *
-     * @see https://github.com/nuxt/nuxt/issues/26271#issuecomment-2178582037
-     * @see https://vercel.com/blog/demystifying-inp-new-tools-and-actionable-insights
-     */
-    await new Promise((resolve) => {
-      // Ensure we always resolve, even if the animation frame never fires
-      setTimeout(resolve, 100)
-      requestAnimationFrame(() => { setTimeout(resolve, 0) })
+  const router = useRouter()
+  onNuxtReady(() => {
+    router.beforeResolve(async () => {
+      /**
+       * This gives an opportunity for the browser to repaint, acknowledging user interaction.
+       * It can reduce INP when navigating on prerendered routes.
+       *
+       * @see https://github.com/nuxt/nuxt/issues/26271#issuecomment-2178582037
+       * @see https://vercel.com/blog/demystifying-inp-new-tools-and-actionable-insights
+       */
+      await new Promise((resolve) => {
+        // Ensure we always resolve, even if the animation frame never fires
+        setTimeout(resolve, 100)
+        requestAnimationFrame(() => { setTimeout(resolve, 0) })
+      })
     })
   })
 })
