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

This commit is contained in:
Daniel Roe 2024-06-21 12:12:43 +01:00
parent 209e81b60d
commit c87ca8607c
No known key found for this signature in database
GPG Key ID: 3714AB03996F442B

View File

@ -1,19 +1,23 @@
import { defineNuxtPlugin } from '../nuxt' import { defineNuxtPlugin } from '../nuxt'
import { useRouter } from '../composables' import { onNuxtReady } from '../composables/ready'
import { useRouter } from '../composables/router'
export default defineNuxtPlugin(() => { export default defineNuxtPlugin(() => {
useRouter().beforeResolve(async () => { const router = useRouter()
/** onNuxtReady(() => {
* This gives an opportunity for the browser to repaint, acknowledging user interaction. router.beforeResolve(async () => {
* It can reduce INP when navigating on prerendered routes. /**
* * This gives an opportunity for the browser to repaint, acknowledging user interaction.
* @see https://github.com/nuxt/nuxt/issues/26271#issuecomment-2178582037 * It can reduce INP when navigating on prerendered routes.
* @see https://vercel.com/blog/demystifying-inp-new-tools-and-actionable-insights *
*/ * @see https://github.com/nuxt/nuxt/issues/26271#issuecomment-2178582037
await new Promise((resolve) => { * @see https://vercel.com/blog/demystifying-inp-new-tools-and-actionable-insights
// Ensure we always resolve, even if the animation frame never fires */
setTimeout(resolve, 100) await new Promise((resolve) => {
requestAnimationFrame(() => { setTimeout(resolve, 0) }) // Ensure we always resolve, even if the animation frame never fires
setTimeout(resolve, 100)
requestAnimationFrame(() => { setTimeout(resolve, 0) })
})
}) })
}) })
}) })