Internationalization (i18n)

You can specify locale messages and a default locale for Vueless components. Additionally, you can integrate the package with vue-i18n.

Defining locales

Vueless supports only the English locale by default. To add additional locales, you can provide them in the createVueless() function under the i18n key, using the structure shown below.

The full list of locale keys available in Vueless UI can be found in the Default Config chapter of the Vueless UI docs, at the end of each page.

Vue-i18n

To integrate the vue-i18n library with Vueless components, use the createVueI18nAdapter() function. This will allow Vueless components to work seamlessly with the vue-i18n package for localization.

main.{js,ts}

import { createVueless, defaultEnLocale, createVueI18nAdapter } from "vueless";
import { createI18n } from "vue-i18n";

const i18n = createI18n({
  legacy: false, // legacy mode should be disabled
  locale: "ua", // default locale
  fallback: "en", // fallback locale
  messages: {
    en: { // customize or overwrite default english locale
      ...defaultEnLocale,
      USelect: { // Vueless component name
        listIsEmpty: "List is empty.",
        noDataToShow: "No data to show.",
        clear: "clear",
        addMore: "Add more...",
      },
      // other project messages
      projectMessageOne: "Hello wrold!",
      projectMessageTwo: "Brave new world.",
    },
    ua: { // new custom locale
      USelect: { // Vueless component name
        listIsEmpty: "Список порожній.",
        noDataToShow: "Дані відсутні.",
        clear: "очистити",
        addMore: "Додати ще...",
      },
      // other project messages
      projectMessageOne: "Привіт світ!",
      projectMessageTwo: "Прекрасний новий світ.",
    },
  },
});

const vueless = createVueless({
  i18n: {
    adapter: createVueI18nAdapter(i18n),
  },
});

Vueless-i18n

Nuxt i18n

Changing current locale

If you’re using vue-i18n, you can change the current locale using the provided useI18n composable. However, if you want to change the locale withoutvue-i18n, you can use the useLocale composable provided by Vueless. This composable allows you to manage the locale directly within the Vueless library.

Vue-i18n

<script setup>
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
locale.value = "ua";
</script>

Vueless-i18n

Nuxt i18n

Customizing messages in specific component

You can easily set custom messages for a specific component by providing the i18n key in the component’s config.

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const selectConfig = {
  i18n: {
    listIsEmpty: t("label.listIsEmpty"), // dynamyc message
    clear: "x", // static message
  }
}
</script>

<USelect :config="selectConfig">