Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

i18n
#

We made a separated config for i18n messages, so you can redefine messages we use in components.

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"]);
});