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

Vueless provides minimal built-in support for internationalization (i18n) out of the box. However, we strongly recommend using vue-i18n alongside vueless-i18n to take full advantage of advanced i18n features.

main.{js,ts}

import { createVueless, defaultEnLocale } from "vueless";

const vueless = createVueless({
  i18n: {
    locale: "en", // 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...",
        },
      },
      ua: { // new custom locale
        USelect: { // Vueless component name
          listIsEmpty: "Список порожній.",
          noDataToShow: "Дані відсутні.",
          clear: "очистити",
          addMore: "Додати ще...",
        },
      },
    },
  },
});

Nuxt i18n

The built-in internationalization support in Vueless works fine with Nuxt. However, you will need to use the Nuxt I18n module for more advanced features like route localization. Run to install Nuxt i18n:

npx nuxi@latest module add @nuxtjs/i18n

You can extend and overwrite locales in locales directory.

locales/en.json

{
  "USelect": {
    "listIsEmpty": "List is empty.",
    "noDataToShow": "No data to show.",
    "clear": "clear",
    "addMore": "Add more..."
  },
  "projectMessageOne": "Hello wrold!",
  "projectMessageTwo": "Brave new world."
}

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

<script setup>
import { useLocale } from "vueless"

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

Nuxt i18n

<script setup>
const { setLocale } = useI18n();

setLocale("ua");
</script>

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