Use this skill when building or debugging table usage with nuxt-ui-tools as a package consumer. Covers defineTableSchema, useTable, DataList, granular composition, columns, filters, sorting, offset or cursor loading, layouts, summary rows on phones, first-use empty states, actions, selection, accessible row names, context, and URL state with concrete examples.
中文简介正在准备中。当前显示原文说明。
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Use this skill for package-consumer tasks involving:
defineTableSchema(...)tableSource(...)useTable(...)DataListDataListRoot and granular rendering partstable.tree) and the expansion APItable.summary) and the view toggle for phonesempty) and record names for assistive technology (rowLabel)md breakpoint (ui.mobile)skills/consumer/package/SKILL.mdskills/consumer/table/references/overview.mdThen use the focused references:
skills/consumer/table/references/getting-started.mdskills/consumer/table/references/data-modes.mdskills/consumer/table/references/url-state.mdskills/consumer/table/references/schema-surface.mdskills/consumer/table/references/layouts.mdskills/consumer/table/references/pagination.mdskills/consumer/table/references/sorting.mdskills/consumer/table/references/filters.mdskills/consumer/table/references/columns.mdskills/consumer/table/references/selection.mdskills/consumer/table/references/tree.mdskills/consumer/table/references/context.mdskills/consumer/table/references/actions.mdskills/consumer/table/references/slots.mdskills/consumer/table/references/patterns.mdSchema-owned table text should be written as translation-friendly lazy values when it comes from app i18n.
Use this pattern for:
Example:
const { t } = useI18n()
const schema = defineTableSchema({
tableKey: 'employees',
rowKey: 'id',
filters: {
search: {
fields: ['fullName', 'email'],
placeholder: () => t('employees.search.placeholder'),
},
ui: (filter) => [
filter.text('fullName', {
label: () => t('employees.filters.name'),
editor: {
placeholder: () => t('employees.filters.searchName'),
},
}),
filter.date('hiredAt', {
label: () => t('employees.filters.hiredAt'),
editor: {
scalar: {
presets: [
{
label: () => t('shared.datePresets.today'),
value: ({ now }) => now,
},
],
},
},
}),
],
},
rowActions: ({ row }) => [
{
key: 'copy-email',
label: () => t('employees.actions.copyEmail'),
},
],
table: {
columns: (column) => [
column.field('fullName', {
label: () => t('employees.columns.fullName'),
}),
],
},
})
Prefer translation keys through t(...) over writing bilingual helpers or rebuilding the whole schema in a computed(...).
If a surface only renders package-owned UI text and does not come from your schema, use the package locale/provider layer instead of duplicating those strings in your app schema.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
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.
中文简介正在准备中。当前显示原文说明。