Translating vael-ui

Every built-in string (dialog close button, toast dismiss, empty states, and similar) has an English default and can be translated by passing your own i18n instance to ConfigProvider. It reads from your existing catalog under the uiKit namespace, so there's nothing extra to install.

import { useI18n } from 'vue-i18n'
import { ConfigProvider } from 'vael-ui'

const i18n = useI18n()

<ConfigProvider :i18n="i18n">
  <YourApp />
</ConfigProvider>

Copy this into your locale file(s) under the uiKit key, then translate the values:

{
  "uiKit": {
    "dialog": {
      "close": "Close",
      "maximize": "Maximize",
      "restore": "Restore"
    },
    "toast": {
      "dismiss": "Dismiss"
    },
    "message": {
      "dismiss": "Dismiss"
    },
    "pullToRefresh": {
      "pull": "Pull to refresh",
      "release": "Release to refresh",
      "refreshing": "Refreshing…",
      "updated": "Updated"
    },
    "inputNumber": {
      "increment": "Increase",
      "decrement": "Decrease"
    },
    "passwordInput": {
      "show": "Show password",
      "hide": "Hide password"
    },
    "select": {
      "empty": "No options",
      "clear": "Clear selection",
      "selectedCount": "{count} selected"
    },
    "combobox": {
      "empty": "No results",
      "clear": "Clear selection",
      "toggle": "Toggle options"
    },
    "fileUpload": {
      "browse": "Browse files",
      "drop": "Drop files here",
      "remove": "Remove"
    },
    "cascadeSelect": {
      "empty": "No options",
      "clear": "Clear selection"
    },
    "treeSelect": {
      "clear": "Clear selection"
    },
    "chip": {
      "remove": "Remove"
    },
    "splitButton": {
      "more": "More actions"
    },
    "breadcrumb": {
      "label": "Breadcrumb"
    },
    "commandPalette": {
      "placeholder": "Search…",
      "empty": "No results"
    },
    "tour": {
      "next": "Next",
      "back": "Back",
      "skip": "Skip",
      "done": "Done",
      "stepOf": "Step {current} of {total}"
    },
    "toaster": {
      "label": "Notifications"
    },
    "pagination": {
      "label": "Pagination",
      "first": "First page",
      "previous": "Previous page",
      "page": "Page {page}",
      "next": "Next page",
      "last": "Last page"
    },
    "datePicker": {
      "chooseDate": "Choose date",
      "today": "Today",
      "clear": "Clear",
      "hour": "Hour",
      "minute": "Minute",
      "increaseHour": "Increase hour",
      "decreaseHour": "Decrease hour",
      "increaseMinute": "Increase minute",
      "decreaseMinute": "Decrease minute"
    },
    "dataTable": {
      "selectAll": "Select all rows",
      "selectRow": "Select row",
      "collapseRow": "Collapse row",
      "expandRow": "Expand row"
    },
    "sortable": {
      "instructions": "Press Space or Enter to start reordering. Use the arrow keys to move, Space to drop, Escape to cancel.",
      "grabbed": "Grabbed {label}. Position {position} of {total}.",
      "moved": "{label} moved to position {position} of {total}.",
      "movedToLevel": "{label} moved to position {position} of {total}, level {depth}.",
      "dropped": "Dropped {label} at position {position} of {total}.",
      "cancelled": "Reordering cancelled. {label} returned to its original position."
    },
    "rating": {
      "valueText": "{value} of {max}"
    }
  }
}

Key	English default
`uiKit.dialog.close`	Close
`uiKit.dialog.maximize`	Maximize
`uiKit.dialog.restore`	Restore
`uiKit.toast.dismiss`	Dismiss
`uiKit.message.dismiss`	Dismiss
`uiKit.pullToRefresh.pull`	Pull to refresh
`uiKit.pullToRefresh.release`	Release to refresh
`uiKit.pullToRefresh.refreshing`	Refreshing…
`uiKit.pullToRefresh.updated`	Updated
`uiKit.inputNumber.increment`	Increase
`uiKit.inputNumber.decrement`	Decrease
`uiKit.passwordInput.show`	Show password
`uiKit.passwordInput.hide`	Hide password
`uiKit.select.empty`	No options
`uiKit.select.clear`	Clear selection
`uiKit.select.selectedCount`	{count} selected
`uiKit.combobox.empty`	No results
`uiKit.combobox.clear`	Clear selection
`uiKit.combobox.toggle`	Toggle options
`uiKit.fileUpload.browse`	Browse files
`uiKit.fileUpload.drop`	Drop files here
`uiKit.fileUpload.remove`	Remove
`uiKit.cascadeSelect.empty`	No options
`uiKit.cascadeSelect.clear`	Clear selection
`uiKit.treeSelect.clear`	Clear selection
`uiKit.chip.remove`	Remove
`uiKit.splitButton.more`	More actions
`uiKit.breadcrumb.label`	Breadcrumb
`uiKit.commandPalette.placeholder`	Search…
`uiKit.commandPalette.empty`	No results
`uiKit.tour.next`	Next
`uiKit.tour.back`	Back
`uiKit.tour.skip`	Skip
`uiKit.tour.done`	Done
`uiKit.tour.stepOf`	Step {current} of {total}
`uiKit.toaster.label`	Notifications
`uiKit.pagination.label`	Pagination
`uiKit.pagination.first`	First page
`uiKit.pagination.previous`	Previous page
`uiKit.pagination.page`	Page {page}
`uiKit.pagination.next`	Next page
`uiKit.pagination.last`	Last page
`uiKit.datePicker.chooseDate`	Choose date
`uiKit.datePicker.today`	Today
`uiKit.datePicker.clear`	Clear
`uiKit.datePicker.hour`	Hour
`uiKit.datePicker.minute`	Minute
`uiKit.datePicker.increaseHour`	Increase hour
`uiKit.datePicker.decreaseHour`	Decrease hour
`uiKit.datePicker.increaseMinute`	Increase minute
`uiKit.datePicker.decreaseMinute`	Decrease minute
`uiKit.dataTable.selectAll`	Select all rows
`uiKit.dataTable.selectRow`	Select row
`uiKit.dataTable.collapseRow`	Collapse row
`uiKit.dataTable.expandRow`	Expand row
`uiKit.sortable.instructions`	Press Space or Enter to start reordering. Use the arrow keys to move, Space to drop, Escape to cancel.
`uiKit.sortable.grabbed`	Grabbed {label}. Position {position} of {total}.
`uiKit.sortable.moved`	{label} moved to position {position} of {total}.
`uiKit.sortable.movedToLevel`	{label} moved to position {position} of {total}, level {depth}.
`uiKit.sortable.dropped`	Dropped {label} at position {position} of {total}.
`uiKit.sortable.cancelled`	Reordering cancelled. {label} returned to its original position.
`uiKit.rating.valueText`	{value} of {max}