feat(nuxt): support prefetching <nuxt-link>

[Mini-ghost]

🔗 Linked issue

nuxt/nuxt#13482 #2086

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Support prefetch prop for <nuxt-link>. This implementation is refer to https://github.com/nuxt/framework/discussions/2086#discussioncomment-1683819. Need a polyfill for requestIdleCallback ?

Also, I'm not sure how to use Link Prefetching like below, because path are unpredictable.

<linkrel="prefetch" as="script" href="path" />

The implementation of this PR refers to nuxt2, maybe we can generate a router manifest. and mapping file path when triggering prefetch ?

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	b7bea15
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6320e387fc714e0008189c59

[atinux]

Thank you for the PR @Mini-ghost 💚

From what I see, requestIdleCallback is not supported in Safari without a flag: https://caniuse.com/requestidlecallback

So I guess we need a polyfill for it, what would be the preferred approach to do so @pi0 ?

[Mini-ghost]

@pi0@atinux I will add polyfill for requestIdleCallback. And I think we have two way to polyfill.

1. import polyfill at topest of the file and run in client side.

constrequestIdleCallback=process.client
? window.requestIdleCallback||function(cb){conststart=Date.now()constidleDeadline={didTimeout: false,timeRemaining(){returnMath.max(0,50-(Date.now()-start))}}returnwindow.setTimeout(function(){cb(idleDeadline)},1)}
: (()=>{})asanyasWindow['requestIdleCallback']

2. When component mounted and need prefetch, implement with Singleton.

letrequestIdleCallback: Window['requestIdleCallback']|null=null

onMounted(()=>{if(!shouldPrefetch.value){return}// add `requestIdleCallback` polyfill if not supported and need prefetchif(!requestIdleCallback){requestIdleCallback=window.requestIdleCallback||function(cb){conststart=Date.now()constidleDeadline={didTimeout: false,timeRemaining(){returnMath.max(0,50-(Date.now()-start))}}returnwindow.setTimeout(function(){cb(idleDeadline)},1)}}})

Which is the preferred approach?

[danielroe]

@Mini-ghost The first approach seems better to me 👍

[danielroe]

Thank you! Looks good to me but @pi0 may have some more ideas for improvement.

[pi0]

Thank you so much for helping on this feature @Mini-ghost <3

I've made few more reactors to the PR to simplify do small fixes and also integrated with new payload prerendering using link:prefetch hook to be ready to land.