We just released Vuestic Admin 3.0 🤗
🔥🔥🔥 Hire us

Configuration
#

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

Color themes
#

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

// main.js
import { createVuestic } from "vuestic-ui";
import "vuestic-ui/css";

createApp(App)
  .use(
    createVuestic({
      config: {
        colors: {
          variables: {
            // Default colors
            primary: "#23e066",
            secondary: "#002c85",
            success: "#40e583",
            info: "#2c82e0",
            danger: "#e34b4a",
            warning: "#ffc200",
            gray: "#babfc2",
            dark: "#34495e",

            // Custom colors
            yourCustomColor: "#d0f55d",
          },
        },
      },
    })
  )
  .mount("#app");

More on this topic

Icon fonts
#

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

yarn add material-design-icons-iconfont -D

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

// main.js
import { createVuestic, createIconsConfig } from "vuestic-ui";
import "vuestic-ui/css";
import "material-design-icons-iconfont/dist/material-design-icons.min.css";

Using custom icons
#

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

// main.js
import { createVuestic, createIconsConfig } from "vuestic-ui";
import "vuestic-ui/css";

createApp(App)
  .use(
    createVuestic({
      config: {
        icons: createIconsConfig({
          aliases: [
            {
              name: "bell",
              color: "#FFD43A",
              to: "fa4-bell",
            },
            {
              name: "ru",
              to: "flag-icon-ru small",
            },
          ],
          fonts: [
            {
              name: "fa4-{iconName}",
              resolve: ({ iconName }) => ({ class: `fa fa-${iconName}` }),
            },
            {
              name: "flag-icon-{countryCode} {flagSize}",
              resolve: ({ countryCode, flagSize }) => ({
                class: `flag-icon flag-icon-${countryCode} flag-icon-${flagSize}`,
              }),
            },
          ],
        }),
        // ...
      },
    })
  )
  .mount("#app");

More on this topic

Custom classes for the colors
#

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

Configuring the custom classes
#

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

import { createVuestic } from 'vuestic-ui'
import 'vuestic-ui/css'

createApp(App)
  .use(createVuestic({
    colors: { /* ... */ },
    colorsClasses: [
      {
        prefix: '',
        property: ['border', 'color'],
      },
      {
        prefix: 'brand',
        property: 'background',
      },
    ],
  }))

More on this topic

Components config
#

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:

Open in GitHub

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

//main.js
import { createVuestic } from "vuestic-ui";
import "vuestic-ui/css";

const app = createApp(App)
  .use(
    createVuestic({
      config: {
        components: {
          VaButton: {
            preset: "secondary",
            borderColor: "primary",
            size: "small",
          },
        },
      },
    })
  )
  .mount("#app");

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

Open in GitHub

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).

More on this topic