humanonlyweb/ui

Localisation

The components' built-in text, in your language.

Markdown

A few strings come from the components themselves: button names like “Close”, counts like “3 of 80 characters”, empty states. They're English by default, and you can override any of them. Strings with a value in them are functions, so each language can put the words in its own order.

Vue

import { createUi } from "@humanonlyweb/ui";

app.use(
  createUi({
    translations: {
      close: "Fermer",
      characterCount: (count, max) => `${count} sur ${max} caractères`,
      keys: { command: "Commande" },
    },
  }),
);
Copy code

To switch languages without a reload, pass a ref instead, e.g. a computed from your i18n locale.

Nuxt

Set them in a plugin:

// app/plugins/ui-translations.ts
import { useUiConfig } from "@humanonlyweb/ui";

export default defineNuxtPlugin(() => {
  useUiConfig().translations.value = { close: "Fermer" };
});
Copy code

Keys

defaultTranslations lists every key with its English text; the type is UiTranslations. When a prop sets the same text, like ConfirmDialog's confirm-text, the prop wins.