`prefetchComponents()`

Manually prefetches the JS chunks for one or more global components.

Since Nuxt 3.0 Spec ↗

Syntax

await prefetchComponents(names)

Parameters

Name	Type	Required	Description
`names`	`string \| string[]`	Yes	The registered (global) component name(s) to prefetch.

Returns

Promise<void> — Resolves once chunks are fetched (client only).

Examples

<script setup lang="ts">
function onHoverCheckout() {
  // Warm the heavy modal before it is shown
  prefetchComponents('CheckoutModal')
}
</script>

<script setup lang="ts">
onMounted(() => {
  prefetchComponents(['HeavyChart', 'DataGrid'])
})
</script>

Notes

Client-only; downloads the chunk into cache without rendering, so the component mounts instantly later. Works with components auto-imported from `components/`. Use `preloadComponents` for higher-priority preloading. No effect during SSR.