We just releasedย Vuestic 1.8.5 ๐Ÿค—
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

Components config
#

Component config allows you to override default props 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. Moreover, there are two more nested configuration objects — presets ะธ all. preset allows you to specify named props combinations for any component. all allows you to specify props value for all Vuestic components. For example:

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

The example below allows you to change styling of all buttons for the whole Vuestic documentation site.

Open in GitHub

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:

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

Presets config
#

As was said, presets allows you to specify named props combinations for Vuestic components and then use them in your application. For example:

components: {
  presets: {
    VaButton: {
      addToCart: { size: 'large', round: true },
      deleteFromCart: { size: 'small', plain: true },
    },
  },
},
Open in GitHub

Scoped config
#

You can use the <va-config> component to overwrite the default props values for the components inside that tag. Take a look at the demo below:

Open in GitHub

Look at the code. In this demo we have changed the default color for all the VaButton and VaIcon inside the VaConfig. We also have passed a different value to the third button's color prop (direct component's prop takes precedence over the one specified on the VaConfig).

Find out more about VaConfig component

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:

Properties values priorities
Open in GitHub

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:

components: {
  VaIcon: {
    sizesConfig: {
      defaultSize: 24,
      sizes: {
          small: 16,
          medium: 24,
          large: 32,
      },
    },
  },
},

Component config service API
#

Types
#

NameTypeDescription
ComponentsConfig

{ [componentName: string]: Props }

Object where the keys are Vuestic component names and the values are the component's new default props.

ComponentsAllConfig

{ [propName: string]: any }

Object where the keys are prop names and the values are the prop's new default values. Will be applied if there are no other source of prop value.

ComponentsPresetsConfig

{ [componentName: string]: { [propName: string]: any } }

Object where the keys are Vuestic component names and the values are objects where the keys are prop names and the values are the prop's values.