API
usePrerenderData
API reference for the usePrerenderData composable.
usePrerenderData(key, handler, options?)
A wrapper around useAsyncData optimized for SSG.
Parameters
| Parameter | Type | Description |
|---|---|---|
key | string | Unique key for data deduplication. Required. |
handler | (ctx: NuxtApp) => Promise<T> | Async function that fetches data. |
options | AsyncDataOptions<T> | Optional options (same as useAsyncData). |
Return value
Returns the resolved data directly (not wrapped in AsyncData).
Examples
Basic usage
const data = await usePrerenderData('my-key', async () => {
const { Server } = await import('~/server/data')
return Server.getData()
})
With transform option
const items = await usePrerenderData(
'items-key',
async () => {
const { Server } = await import('~/server/data')
return Server.getAllItems()
},
{ transform: (data) => data.items },
)
Manual import
import { usePrerenderData } from 'nuxt-prerender-kit/runtime'
Configuration
The module works out of the box with sensible defaults. No configuration is required.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-prerender-kit'],
})
Configuration is set under the prerenderKit key in nuxt.config.ts.
debug.disableWrapping
- Type:
boolean - Default:
false
Disables the automatic Vite plugin wrapping of usePrerenderData handlers. Use this as an escape hatch if you prefer manual control.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-prerender-kit'],
prerenderKit: {
debug: {
disableWrapping: true,
},
},
})
When wrapping is disabled, you must wrap handlers manually:
usePrerenderData(
'key',
import.meta.prerender
? async () => {
const { Server } = await import('~/server/data')
return Server.getData()
}
: neverReachable(),
)
Limitations
Key is required
Unlike useAsyncData, usePrerenderData requires an explicit key as the first argument. The auto-generated key pattern is not supported.
// ❌ Not supported
usePrerenderData(async () => { ... })
// ✅ Must provide a key
usePrerenderData('my-key', async () => { ... })