# Localisation

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

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

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

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

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

## Nuxt

Set them in a plugin:

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

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

## 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.