Configuration

#

Vuestic UI comes with a convenient mechanism that allows for a deep icons, components, and colors customization.

You can easily modify the colors used by Vuestic UI components (and even add custom ones):

By default Vuestic UI uses material icons, so make sure to install the package:

After installing the material icons package, you need to import its styles into the main.js file.

With icons config you can use any icon font you’d like by simply transforming the icon names to respective props.

By default, Vuestic UI creates custom classes for coloring the text and background colors of elements relative to the global color configuration.

With custom classes configuration you can create and/or use classes with styles associated with the global color configuration

If you want to set global defaults for Vuestic components or create presets — we have config for this as well!

Let’s say you want all of your buttons to be outline and small to match your design, but by default that’s not the case:

To solve that problem edit to main.js file the following way:

Now all of your buttons by default will look like this:

You can configure any prop for any Vuestic UI component in such a manner.

In case your customization runs deeper consider overriding CSS variables or even directly the .class’ properties (components use BEM-notation so it should be easy to figure out which selector to address with the help of standard dev-tooling).