i18n #
We made a separated config for i18n messages, so you can redefine messages we use in components.
i18n default messages
expand_moreChange 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"]);
});
Recommended config structure
expand_more