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

Components config
#

Component config allows you to override default props, attributes and slot values for any Vuestic component. It is an object where the keys are component names and the values are prop-value pairs you want to overwrite.

Configuration can be combined in preset, in case you want to have different types of default configurations for component.

You can use all property to set prop values for all components at once. It will be applied if there are no other source of prop value.

Sometimes Vuestic components have nested other Vuestic components. You can configure child components as well adding child: prefix and component child name to the prop name.

Global config
#

You can set global configuration for all components using createVuestic function. For example:

createVuestic({
  config: {
    components: {
      VaAvatar: {
        square: true,
        icon: 'spinner',
      },
      VaCard: {
        color: 'secondary',
      },
      VaTabs: {
        grow: true,
      },
    },
  }
})

You can also use useGlobalConfig composable to get global configuration in your component programaticaly during runtime.

We make sure all configuration is fully reactive to changes in Components Config

Scoped config
#

Using VaConfig will update not update the global configuration, but only the components inside the VaConfig.

Open in GitHub
<template>
  <VaConfig
    :components="{
      VaAlert: { color: 'danger', icon: 'warning' },
    }"
  >
    <div>
      <VaAlert>
        This is error alert
      </VaAlert>
      <VaAlert>
        This is error alert
      </VaAlert>

      <VaAlert color="warning">
        This alert can have it's own color
      </VaAlert>
    </div>
  </VaConfig>
</template>

Notice that passing props directly on component will have the highest priority than VaConfig.

Find out more about VaConfig component

Props and attributes
#

In components config you can override default props and attributes.

Any kind of attribute can be applied. Usually it is used for class and style attributes. For example:

createVuestic({
  config: {
    components: {
      VaAlert: {
        style: 'outline: 2px solid var(--va-primary)',
        class: 'my-custom-alert',
        icon: 'info',
        dense: true,
      }
    }
  }
})
.my-custom-alert{background:linear-gradient(90deg,#ff8a00,#e52e71)}
Open in GitHub

Presets config
#

For each component you can make preset configurations. It is useful when you have a set of props that you want to use in different places. For example, you can create a preset for a button with a specific color and size. Then you can use this preset in different places. For example:

createVuestic({
  config: {
    components: {
      presets: {
        VaButton: {
          addToCart: { round: true, color: 'success', icon: 'shopping_cart', 'slot:default': 'Add to card' },
        },
      },
    },
  }
})
Open in GitHub
<template>
  <VaButton
    preset="addToCart"
  />
</template>

You can apply multiple presets to the same component. Props from the later presets will override props from the former:

createVuestic({
  config: {
    components: {
      presets: {
        VaButton: {
          addToCart: { round: true, color: 'success', icon: 'shopping_cart', 'slot:default': 'Add to card' },
          promotion: { gradient: true, color: 'primary' }
        },
      },
    },
  }
})
Open in GitHub
<template>
  <VaButton
    :preset="['addToCart', 'promotion']"
  />
</template>

All components config
#

You could use components.all global config property to set prop values for all components at once. It will be applied if there are no other source of prop value. For example:

createVuestic({
  config: {
    components: {
      all: {
        color: '#d91698',
        disabled: true,
      },
    },
  }
})

These prop values will be used as defaults if prop is not set somewhere else (inside the component or other configs).

Child components config
#

You can also configure child components. For example, you can configure the VaButton component inside the VaModal component. For example:

SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Open in GitHub
<template>
  <VaDatePicker
    :child:prev-button="{ textColor: 'danger' }"
    :child:middle-button="{ textColor: 'info' }"
    :child:next-button="{ textColor: 'success' }"
  />
</template>
<script setup>
import { VaDatePicker } from 'vuestic-ui'
</script>

Slots config
#

There are cases when class and style are not enough. In case you need to change HTML content for component globally use slot:. For example:

import GithubSvgIcon from './GithubSvgIcon.vue'

createVuestic({
  config: {
    components: {
      presets: {
        VaButton: {
          github: {
            'slot:prepend': markRaw(GithubSvgIcon),
            'slot:default': 'View on GitHub',
            color: '#000000',
            style: 'fill: currentColor',
            class: 'va-button--github',
          }
        }
      }
    }
  }
})
.va-button--github svg{margin-right:8px}
Open in GitHub

You can pass plain text, vue component or vue vNode as valid slot value.

Props values priority
#

You are able to specify props values via: direct, va-config, presets config, components config, components all config. Their priority (in case several options were used) is presented at the scheme below:

Less important

Component `default` prop value
Global `all` props value
Component props from Global Config
Component props form VaConfig
Props value from component preset
Props bound directly to component

More important

Default sizes
#

If you would like to set default sizes for the component you could use sizesConfig property. Feel free to check the example below:

createVuestic({
  config: {
    components: {
      VaIcon: {
        sizesConfig: {
          defaultSize: 24,
          sizes: {
            small: 16,
            medium: 24,
            large: 32,
          },
        },
      },
    },
  }
})