Warmup Strategy

Background

Nuxt Scripts can insert a warmup <link> before a deferred script loads. Consider this script:

useScript('/script.js')

/script.js uses the default onNuxtReady trigger. While Nuxt hydrates, Nuxt Scripts adds a low-priority preload to the document head:

<link rel="preload" href="/script.js" as="script" fetchpriority="low">

Automatic warmup applies to the client and onNuxtReady script triggers. Change it with warmupStrategy.

These strategies map to the browser's preload and connection-warming hints. Keep them selective: preloading every deferred script makes the hints compete with the resources needed for the current page.

warmupStrategy

warmupStrategy accepts:

• false: Disable warmup.
• 'preload': Preload the script. Use this when the script will load immediately.
• 'preconnect' or 'dns-prefetch': Warm up the script's origin. These values work only for cross-origin scripts; same-origin scripts do not receive a link tag.

warmup

Call warmup() directly when application state tells you a manual script will probably load soon:

const script = useScript('/video.js', {
  trigger: 'manual'
})
// Start downloading when the video enters the viewport
onVisible(videoContainer, () => {
  script.warmup('preload')
})
// Execute after a click
onClick(videoContainer, () => {
  script.load()
})