UI
UI reference
Look up the import paths, translated-text and money helpers, and translation keys of UI.
This page lists what @frigear-nu/ui exports outside the auto-imports: import paths, helpers for translated text and
money, and its translation keys. It is for app developers and module authors. Set up the module first:
Overview.
Subpath exports
Import from these paths in code outside the Nuxt app.
| Import | Contents |
|---|---|
@frigear-nu/ui | The Nuxt module |
@frigear-nu/ui/components/* | One component file, such as @frigear-nu/ui/components/TagInput |
@frigear-nu/ui/composables, @frigear-nu/ui/composables/* | The composables |
@frigear-nu/ui/utils | The pure helpers: errorMessage, errorToToast, stripLocale, isExternalPath, formatDate, formatDateTime, formatTime, formatDateRange, statusColor, surfaceClass, tableUi, numericColumn, emptyCell, nextTableSort, tableSortQuery, tablePageRange |
@frigear-nu/ui/types | The types used by the components' props and the helpers |
@frigear-nu/ui/translated | Translated helpers (below) |
@frigear-nu/ui/markdown | renderMarkdown, withMdcData |
@frigear-nu/ui/money | Money helpers (below) |
Translated text and money
Money amounts are in the currency's minor unit, such as cents.
// @frigear-nu/ui/translated
type Translated = string | Record<string, string> // one text for every language, or locale -> text
translate(value, locale = 'en', fallback?): string // locale, else fallback, else 'en', else the first non-empty entry
hasTranslation(value, locale): boolean // text for exactly that locale
readTranslated(value, locale): string
writeTranslated(value, locale, text): Translated | undefined // plain strings stay plain; empty entries dropped
expandTranslated(value, locale): Translated | undefined // plain string to a per-locale map
collapseTranslated(value, locale): Translated | undefined // map to one string
filledLocales(value): string[]
isLocaleCode(code): boolean // da, en-GB, pt_BR
// @frigear-nu/ui/markdown
renderMarkdown(source: string): string // escapes everything; supports **bold**, _italic_, [text](https://...) links and paragraphs
withMdcData(source: string, data?: Record<string, unknown>): string // prepends data as frontmatter so MDC resolves {{ name }}
// @frigear-nu/ui/money (amounts are in the currency's minor unit)
type Currency = { name?: string, code: string, symbol: string }
currencyDigits(code: string): number // minor-unit digits from Intl: 2 for EUR, 0 for JPY, 3 for KWD
formatMoney(amount: number, currency: string, locale?: string): string // formatMoney(15000, 'DKK', 'da') -> '150,00 kr.'
fromCents(amount, code = 'EUR'): number | null | undefined
toCents(value, code = 'EUR'): number | null | undefined
currencyOptions(locale = 'en'): Currency[]
Translations
Override any string in your app's i18n/locales/<code>.json. The module ships shared da and en strings when
@nuxtjs/i18n is installed. Other modules reuse them, so an override applies wherever a key appears. See
overriding module strings.
| Namespace | Keys |
|---|---|
common | or, close, information, back, current, visit, refresh, expiresIn |
actions | selectFiles, removeAllFiles, view, backTo, save, select, change, cancel |
locale | switch |
translated | translate, filled, missing, addLanguage, singleLanguage (used by TranslatedInput) |
markdown | write, preview, empty (used by MarkdownTextarea) |
patterns | Used by the page components and helpers (below) |
{ "actions": { "cancel": "Never mind" } }
The patterns strings
They are read through useUiT('patterns').
| Key | Used by |
|---|---|
notSet | DescriptionList for a missing value ("Not set") |
moreActions | RowMenu button label when no subject is given |
actionsFor | RowMenu button label with a subject: "Actions for {subject}" |
viewAll | ListCard link label (toLabel) |
copied | useCopyToClipboard toast |
genericError | errorMessage when an error carries no message |
open, edit, delete | The standard labels of row-menu entries |
confirm | ConfirmDialog confirm button when no confirmText is given |
sections | PageSectionSwitcher accessible name when no label is given |
breadcrumb | Shipped ("Breadcrumb"); no UI component reads it yet |
sortBy, sortedAsc, sortedDesc | useTableSort header labels for screen readers ("Sort by {column}, now ascending") |
range, noRows, rowsPerPage | TablePagination ("{from}–{to} of {total}", "Rows per page") |
To change one string on a single page, pass the matching prop instead, such as empty on DescriptionList or
toLabel on ListCard. To change it everywhere, override the key:
{ "patterns": { "notSet": "Missing", "viewAll": "See everything" } }
Module-specific text does not belong in these namespaces. Each module ships its own and reads it with
useModuleT.Next steps
- Composables and helpers – look up the auto-imported versions of these helpers.
- Text and formatting – the rules for strings, dates and money on a page.