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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Use this skill for package-consumer tasks involving:
UiToolsProviderui-tools locale objects() => t('...')skills/consumer/package/SKILL.mdskills/consumer/table/SKILL.mdskills/consumer/form/SKILL.mdPackage-owned ui-tools copy should come from the ui-tools locale layer, not from repeating those strings in every schema.
Typical app shell:
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
import * as uiToolsLocales from '#ui-tools/i18n/locales'
const { locale } = useI18n()
</script>
<template>
<UApp :locale="locales[locale]">
<UiToolsProvider :locale="uiToolsLocales[locale]">
<NuxtPage />
</UiToolsProvider>
</UApp>
</template>
If uiToolsLocales[locale] is undefined, ui-tools falls back to English.
Use a custom locale object when you want to override only part of the package copy:
const locale = defineUiToolsLocale({
code: 'fr',
name: 'Français',
messages: {
table: {
footer: {
rowsPerPage: 'Lignes par page',
},
},
},
})
Use the provider locale for package-owned UI such as:
That copy belongs to the package and should be translated once through the locale object.
Use lazy translation values for schema-owned text such as:
Preferred pattern:
const { t } = useI18n()
const schema = defineTableSchema({
filters: {
search: {
fields: ['fullName'],
placeholder: () => t('employees.search.placeholder'),
},
ui: (filter) => [
filter.text('fullName', {
label: () => t('employees.filters.name'),
editor: {
placeholder: () => t('employees.filters.searchName'),
},
}),
],
},
table: {
columns: (column) => [
column.field('fullName', {
label: () => t('employees.columns.fullName'),
}),
],
},
})
Do not rebuild the whole schema in computed(() => defineTableSchema(...)) just to make translations reactive.
Instead:
() => t('...')ui-tools resolve them at render timeconst { t } = useI18n()
const schema = defineFormSchema({
fields: [
{
key: 'firstName',
type: 'text',
label: () => t('users.fields.firstName.label'),
placeholder: () => t('users.fields.firstName.placeholder'),
},
],
})
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
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 for internal i18n work in this repository. Covers locale ownership, provider wiring, lazy schema text contracts, and the maintenance surfaces that must stay in sync when package or playground translations change.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.