> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nuxt/nuxt/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Tip>
  Nuxt already automatically preloads the necessary routes if you're using the `NuxtLink` component.
</Tip>

## Type Signature

```ts theme={null}
function preloadRouteComponents(to: RouteLocationRaw): Promise<void>
```

## Parameters

<ParamField path="to" type="RouteLocationRaw" required>
  The route to preload. Can be a string path or a route location object.
</ParamField>

## Example

Preload a route when using `navigateTo`:

```ts theme={null}
// 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

<Note>
  On server, `preloadRouteComponents` will have no effect.
</Note>

## See Also

* [`navigateTo`](/api/utils/navigate-to)
* [`NuxtLink` component](/api/components/nuxt-link)
* [`prefetchComponents`](/api/utils/prefetch-components)
* [`preloadComponents`](/api/utils/preload-components)