Usage
Basic
usePrerenderData is auto-imported globally by Nuxt, so you can use it directly in any page or component:
const posts = await usePrerenderData('blog-posts', async () => {
const { fetchAllPosts } = await import('~/server/api/blog')
return fetchAllPosts()
})
You can also import it manually if preferred:
import { usePrerenderData } from 'nuxt-prerender-kit/runtime'
With Options
usePrerenderData supports the same options as useAsyncData:
const titles = await usePrerenderData(
'blog-titles',
async () => {
const { fetchAllPosts } = await import('~/server/api/blog')
return fetchAllPosts()
},
{ transform: (posts) => posts.map((p) => p.title) },
)
Shared Composable
Extract a reusable composable to share data-fetching logic across pages. The Vite transform still applies because it matches literal usePrerenderData calls in any .ts file:
export async function useBlogPosts() {
return usePrerenderData('blog-posts', async () => {
const { fetchAllPosts } = await import('~/server/api/blog')
return fetchAllPosts()
})
}
Then use it from any page:
const posts = await useBlogPosts()
Caveats
Use Dynamic Imports Inside the Handler
Always use dynamic import() inside the handler function, not static imports at the top of the file. This ensures server-only code is tree-shaken from the client bundle.
// ❌ Don't do this — static import stays in the client bundle
import { fetchAllPosts } from '~/server/api/blog'
const posts = await usePrerenderData('blog-posts', async () => {
return fetchAllPosts()
})
// ✅ Do this — dynamic import is removed with the handler
const posts = await usePrerenderData('blog-posts', async () => {
const { fetchAllPosts } = await import('~/server/api/blog')
return fetchAllPosts()
})
See Why Dynamic Imports for a detailed explanation.
Do Not Alias usePrerenderData
The build-time Vite plugin detects literal usePrerenderData( calls to apply the transformation. Aliasing it to another variable will bypass the plugin and the function will silently fall back to runtime behavior.
// ❌ Don't do this
const fetchData = usePrerenderData
const posts = await fetchData('blog-posts', async () => {
const { fetchAllPosts } = await import('~/server/api/blog')
return fetchAllPosts()
})
Instead, always call usePrerenderData directly:
// ✅ Do this
const posts = await usePrerenderData('blog-posts', async () => {
const { fetchAllPosts } = await import('~/server/api/blog')
return fetchAllPosts()
})