Global configuration
Vuetify allows you to set default prop values globally or per component when setting up your application. Using this functionality you can for example disable ripple on all components, or set the default elevation for all sheets or buttons.
Setup
Use the defaults property of the Vuetify configuration object to set default prop values. Here we have disabled ripple for all components that support it, and set the default elevation to 4
for all <v-sheet>
components.
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
export default createVuetify({
defaults: {
global: {
ripple: false,
},
VSheet: {
elevation: 4,
},
},
})
Contextual defaults
Defaults can also be configured for components nested within other components, for example if you want to set the default variant for all <v-btn>
components nested within a <v-card>
component:
createVuetify({
defaults: {
VCard: {
VBtn: { variant: 'outlined' },
}
},
})
This is used internally by some components already:
<v-btn>
hasvariant="text"
when nested within a<v-card-actions>
or<v-toolbar>
<v-list>
hasbg-color="transparent"
when nested within a<v-navigation-drawer>
- Lists, chip groups, expansion panels, tabs, and forms all use this system to propagate certain props to their children, for example
<v-tabs disabled>
will set the default value ofdisabled
totrue
for all<v-tab>
components inside it.
v-defaults-provider can be used to set defaults for components within a specific scope.
Priority
When creating and mounting a component, Vuetify uses the following priority in determining which prop value to use:
- Value set as prop value to the component itself
- Value defined in component specific section of defaults configuration object
- Value defined in global section of defaults configuration object
- Value defined in the prop definition of the Vuetify component itself.