We just released Vuestic Admin 3.0 ๐Ÿค—
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

i18n
#

We made a separated config for i18n messages, so you can redefine messages we use in components. If you use vue-i18n, you'll need to store translations for vuestic under vuestic key.

Vuestic comes with few translation strings necessary for accessibility. You can find list of translation strings under collapse bellow:

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

Using with vue-i18n
#

Vuestic integrates with vue-i18n and looks for translations under the key vuestic.{key} so you can override the default messages directly in vue-i18n translations with config structure like this:

{
  en: {
    language: 'English',
    vuestic: {
      search: 'Search'
      // ...
    }
  },
  ua: {
    language: 'ะฃะบั€ะฐั—ะฝััŒะบะฐ',
    vuestic: {
      search: 'ะŸะพัˆัƒะบ',
      // ...
    }
  }
}

If key can't be resolved through vue-i18n we fallback to own config messages.

Changing language in runtime
#

Translations can be used without vue-i18n in case if you use custom solution. You can change translations in runtime by using useI18nConfig composable.

import { useI18nConfig } from "vuestic-ui";

const locale = ref("en");

const messages = {
  en: {
    search: "Search",
  },
  ua: {
    search: "ะŸะพัˆัƒะบ",
  },
};

const { mergeIntoConfig } = useI18nConfig()

watch(locale, (newLocale) => {
  mergeIntoConfig(messages[newLocale]);
});