mirror of https://github.com/nuxt/nuxt.git
42 lines
1.2 KiB
Markdown
42 lines
1.2 KiB
Markdown
---
|
|
title: 'preloadRouteComponents'
|
|
description: preloadRouteComponents allows you to manually preload individual pages in your Nuxt app.
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/preload.ts
|
|
size: xs
|
|
---
|
|
|
|
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{icon="i-ph-rocket-launch-duotone" color="gray"}
|
|
Nuxt already automatically preloads the necessary routes if you're using the `NuxtLink` component.
|
|
::
|
|
|
|
:read-more{to="/docs/api/components/nuxt-link"}
|
|
|
|
## Example
|
|
|
|
Preload a route when using `navigateTo`.
|
|
|
|
```ts
|
|
// 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')
|
|
}
|
|
}
|
|
```
|
|
|
|
:read-more{to="/docs/api/utils/navigate-to"}
|
|
|
|
::note
|
|
On server, `preloadRouteComponents` will have no effect.
|
|
::
|