Overview

You can customise the look and feel of the components and change the default library configuration in vueless.config.js.

---

Colors

Components based on a brand and a gray color.

vueless.config.js

export default {
  brand: "blue",
  gray: "stone",
}

Vueless uses Tailwind CSS under the hood, so you can use any of the Tailwind CSS colors or your own custom colors.

See Colors chapter for more details.

---

Ring

You can specify ring width and ring offset width globally for all Vueless components.

vueless.config.js

export default {
  ring: 6, /* px */
  ringOffset: 4, /* px */
}

See Ring chapter for more details.

---

Rounding

You can specify rounding (border-radius) for all Vueless components.

vueless.config.js

export default {
  rounding: 6, /* px */
}

See Rounding chapter for more details.

---

Dark mode

You can specify dark mode globally for all Vueless components.

vueless.config.js

export default {
  darkMode: true,
}

See Dark mode chapter for more details.

---

Components

Components are styled with Tailwind CSS and you can override any class of each component.

vueless.config.js

export default {
  component: {
    UButton: {
      button: "bg-red-500 w-full",
      text: "px-4 text-lg font-bold"
    }
  }
};

You can find the config keys (button, text, etc...) and default classes in Default config block of Vueless component docs which placed at the end of each component page.

See Components chapter for more details.

---

Icons

Vueless supports three popular icon libraries: @material-symbols, bootstrap-icons, heroicons. You can change it like this.

vueless.config.js

export default {
  component: {
    UIcon: {
      defaults: {
        library: "bootstrap-icons",
      }
    }
  }
};

See Icons chapter for more details.

---

Internationalization (i18n)

You can specify locale messages and a default locale for Vueless components and integrate it with vue-i18n as well.

Vueless supports only English locale by default. To set additional locales, you can provide them in createVueless() under the locale key with the structure below:

main.js

import { createVueless, defaultEnLocale } from "vueless";

const vueless = createVueless({
  locale: {
    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: "Додати ще...",
        },
      },
    },
  },
});

See Internationalization (i18n) chapter for more details.