Use this skill when declaring or manually triggering route-level TanStack Query prefetches with nuxt-ui-tools. Covers page macros, staged dependencies, NuxtLink integration, and error-safe navigation behavior.
中文简介正在准备中。当前显示原文说明。
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Use this surface when a Nuxt page has data that should be warm before navigation.
The module registers the defineQueryPrefetch(...) page macro, executes it from
Nuxt route metadata, and connects it to Nuxt's link:prefetch hook.
Write one top-level macro call in a page's <script setup>:
<script setup lang="ts">
const productQuery = (id: string) =>
queryOptions({
queryKey: ['products', id],
queryFn: () => $fetch(`/api/products/${id}`),
})
defineQueryPrefetch('products-id', ({ route }) => productQuery(String(route.params.id)))
</script>
The build transform moves the call into the page's definePageMeta({ queryPrefetch }). Keep it as a direct top-level statement, and keep an existing
definePageMeta call object-shaped. The transform rejects multiple macro calls,
multiple page-meta calls, page-meta spreads, and an existing queryPrefetch
property because silently choosing between definitions would make route data
unpredictable.
The destination route is resolved from the link, so query keys include the
destination's params and query string. With typed routes enabled, route.params
is narrowed from the route name; otherwise the macro accepts any route name.
Use defineQueryPrefetchPlan() when a later query needs data returned by an
earlier query. Queries declared in one stage run in parallel; stages run in
order:
defineQueryPrefetch('products-id', ({ route }) =>
defineQueryPrefetchPlan()
.stage({
product: productQuery(String(route.params.id)),
})
.stage(({ product }) => ({
recommendations: queryOptions({
queryKey: ['recommendations', product.id],
queryFn: () => $fetch(`/api/products/${product.id}/recommendations`),
}),
})),
)
Each query is deduplicated by TanStack Query's query key. Disabled entries
(enabled: false) are skipped, stale cache entries may be revalidated, and a
failed prefetch is isolated from navigation and from sibling queries. A failed
stage returns the context accumulated before the failure, so page queries remain
the correctness path.
Nuxt links invoke the same runtime through link:prefetch. For menus or other
interactions, call the auto-imported prefetchPage without navigating:
<UButton @mouseenter="prefetchPage('/products/42')">
Preview product
</UButton>
prefetchPage(...) warms both declared queries and lazy route components. Calls
for the same internal destination share one in-flight promise; external URLs are
ignored. It is safe to call from client interactions, while the component preload
portion is skipped during SSR.
For direct package imports, use nuxt-ui-tools/query-prefetch.
Use prefetchTable(...) when the destination page renders a schema-driven table. It derives the
destination layout, pagination, sorting, search, and filter state from the route query, then stages
the same queries the runtime will consume:
defineQueryPrefetch('users', ({ route }) =>
prefetchTable({
route,
schema: usersTableSchema(),
}),
)
Schema context queries run first. The source, global facets, per-filter facets, and remote option queries run next with that context. Page-context queries run last with the prefetched rows. TanStack Query keys remain the cache identity, so mounting the destination table reuses fresh results.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Use this skill when working with the nuxt-ui-tools package as a consumer or integrator. It provides the current package overview and routes to table, form, dashboard, file preview, query-state, shared responsive helpers, remote option loaders, and i18n usage.
中文简介正在准备中。当前显示原文说明。
Use this skill for internal architecture work around config-driven, registry-driven, and pattern-driven feature design in the nuxt-ui-tools repository. Covers how to organize variant-heavy features, where to put implementations, and how to keep both internals and public APIs standardized.
中文简介正在准备中。当前显示原文说明。
Use this skill when building analytics dashboards with nuxt-ui-tools as a package consumer. Covers schema and view functions (defineDashboardSchema, defineDashboardView) that take their context as typed params, useDashboard with a getter that rebuilds on input change, typed injection (useDashboardView, injectDashboard, InferDashboard, InferDashboardView), filters declared inline with the f builder and synced with the URL, memory, or an external store (one value per key across views), headless filters, filter controls and the shipped UI (UiDashboardPage, UiDashboardFilters, UiDashboardFilter, UiDashboardViewTabs) with slot overrides, remote paginated pickers and remoteTableOptions, staged queries (essential / background / deferred) with select and dependent requires, lazy enabled conditions on views, queries, and filters (blocks of disabled queries hidden, grids closing up), derived values, views (tabs), query-scoped filters, number formats (presets, Intl options, useDashboardFormat), and the dashboard blocks (stats with trends, goals, and comparisons, stat groups, gauges, unovis charts with highlights, value labels, and totals, lists with progress rings, bars, funnel, alerts, activity feeds, sortable tables, custom widgets) with their automatic loading, error, empty, and refresh states, card menus, header and footer actions, row actions, drill-down and selected state, card tabs, split cards, comparison periods, auto-refresh, and data freshness.
中文简介正在准备中。当前显示原文说明。
Use this skill when previewing files with nuxt-ui-tools as a package consumer. Covers mounting UiFilePreviewProvider, opening one file or a gallery with useFilePreview() or useNuxtApp().$filePreview, file descriptors (URL, File/Blob, or a function that returns a signed URL), options (index, mode, gallery, loop, pdf page, callbacks), the returned handle, the built-in renderers (image, video, audio, PDF, text/JSON, CSV, Markdown, Office and archive fallbacks), renditions, download and custom header actions, the markdown render hook, custom renderers with defineFilePreviewRenderer and UiFilePreviewTools, theming tokens, and how the upload field uses the preview.
中文简介正在准备中。当前显示原文说明。
Use this skill when working with the nuxt-ui-tools form runtime as a package consumer. It covers schema-driven forms, the provider-backed form API, inline rendering, overlay rendering, form pages with a section navigation, rich options (icon, avatar, chip, description, suffix, grouped menus, and renderOption/renderValue render functions on select, auto-complete, radio, and checkbox group), choice cards, and typed submit results.
中文简介正在准备中。当前显示原文说明。
Use this skill when wiring nuxt-ui-tools translations in an app. Covers UiToolsProvider, locale objects, lazy schema text, and how package-owned UI copy differs from schema-owned text.
中文简介正在准备中。当前显示原文说明。