i18n #
We made a separated config for i18n messages, so you can redefine messages we use in components.
Translations #
| Key | Value |
|---|---|
| Previous |
| back to top |
| breadcrumbs |
| Cancel |
| carousel |
| close |
| close alert |
| close toast |
| color |
| color {color} |
| color selection |
| counter value |
| current rating {value} of {max} |
| decrease counter |
| Drop files here to upload |
| File deleted |
| Finish |
| go last page |
| go next page |
| go next slide |
| go previous slide |
| go slide {index} |
| go to the previous page |
| go to the {page} page |
| enter the page number to go |
| go to the first page |
| increase counter |
| Input field |
| Loading |
| move pagination left |
| move pagination right |
| Next |
| next period |
| Items not found |
| Option is not selected |
| OK |
| open color picker |
| options filter |
| pagination |
| previous period |
| progress |
| progress state |
| remove file |
| reset |
| reset date |
| reset time |
| Search |
| select all rows |
| selected date |
| Selected option |
| selected time |
| select row {index} |
| slide {index} of {length} |
| Current slider value is {value} |
| sort column by {name} |
| split panels |
| step |
| Switch |
| switch view |
| toggle dropdown |
| Undo |
| Upload file |
| vote rating {value} of {max} |
Change default messages #
Default messages can be set in GlobalConfig. Config is fully typed, so you can use autocomplete to find messages you want to change.
import { createVuestic } from "vuestic-ui";
createApp(App)
.use(
createVuestic({
config: {
// ...
i18n: {
ok: "ะะพะฑัะต",
cancel: "ะกะบะฐััะฒะฐัะธ",
search: "ะะพััะบ",
// ...
},
},
})
)
.mount("#app");Changing language in runtime #
If you have more than one language, you can update messages in runtime with useI18nConfig hook from VuesticUI.
import { useI18nConfig } from "vuestic-ui";
const locale = ref("en");
const messages = {
en: {
search: "Search",
},
ua: {
search: "ะะพััะบ",
},
};
watch(locale, (newLocale) => {
mergeIntoConfig(messages[newLocale]);
});Using with vue-i18n #
If you use vue-i18n we can recommend to store VuesticUI messages under specific key
import { useI18nConfig } from "vuestic-ui";
import { useI18n } from "vue-i18n";
const { locale, messages } = useI18n();
const { mergeIntoConfig } = useI18nConfig();
watch(locale, (newLocale) => {
mergeIntoConfig(messages[newLocale]["vuestic"]);
});