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.
<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)}Notice that using components config in createVuestic will update all components globally! In this example, we use VaConfig to apply this changes locally.
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' },
},
},
},
}
})<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' }
},
},
},
}
})<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:
<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>This feature is work in progress. We need to give names to child components and document them. If you want to be able to customize concrete child component, please create an issue on GitHub.
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}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
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,
},
},
},
},
}
})Notice that this is going to move in separate feature and API can be changed in future.