preloadRouteComponents

Manually preload individual pages in your Nuxt app.

Preloading routes loads the components of a given route that the user might navigate to in future. This ensures that the components are available earlier and less likely to block the navigation, improving performance.

Nuxt already automatically preloads the necessary routes if you’re using the NuxtLink component.

Type Signature

function preloadRouteComponents(to: RouteLocationRaw): Promise<void>

Parameters

to · RouteLocationRaw · required

The route to preload. Can be a string path or a route location object.

Example

Preload a route when using navigateTo:

// We don't await this async function, to avoid blocking rendering
// this component's setup function
preloadRouteComponents('/dashboard')

const submit = async () => {
  const results = await $fetch('/api/authentication')

  if (results.token) {
    await navigateTo('/dashboard')
  }
}

Notes

On server, preloadRouteComponents will have no effect.

See Also

• navigateTo
• NuxtLink component
• prefetchComponents
• preloadComponents