A component never holds a string. Everything it says (“Clear”, “No results”, the month names, the page report, the name of the close button) comes from the locale in the configuration, and the configuration is reactive, so changing it changes the page.

Setting one

main.ts

import { Vitral, ptBR } from '@vitral/vue';

createApp(App).use(Vitral, { locale: ptBR });

en and ptBR ship. then open a DatePicker or a DataGrid.

At runtime

Bar.vue

const { locale, setLocale } = useLocale();

setLocale(ptBR);           // every component follows, reactively

A locale of your own

A locale is a plain object, so a third one is a literal: spread en and write the differences.

fr.ts

import { en } from '@vitral/vue';

const frFR = {
    ...en,
    firstDayOfWeek: 1,
    dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
    clear: 'Effacer',
    emptyMessage: 'Aucun résultat'
};

More than strings

Numbers are formatted and parsed by locale: an InputNumber in pt-BR reads “1.234,56” as 1234.56.
Dates use the locale's day and month names, its first day of the week and its date format, in both directions.
Filtering ignores accents and case, so “São” finds “sao” and “Sao” finds “São”.
Messages with placeholders go through formatMessage, as in '{first} to {last} of {total}'.