Aliasing & virtual components
Create virtual components that extend built-in Vuetify components using custom aliases.
Usage
Aliasing allows you to use built-in Vuetify components as a baseline for your custom implementations. To get started, import the component that you want to extend. Provide it as the value of a unique key that is used for the virtual component’s name:
import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components'
export default createVuetify({
aliases: {
MyButton: VBtn,
MyButtonAlt: VBtn,
},
})
Virtual component defaults
Virtual components have access to the Vuetify Global configuration. Default settings for aliases are defined the same as built-in components with no extra steps required by you. In the following example, MyButton uses v-btn props to change it’s default variant:
import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components'
export default createVuetify({
aliases: {
MyButton: VBtn,
},
defaults: {
VBtn: { variant: 'flat' },
MyButton: { variant: 'tonal' },
},
})
Nested defaults
Prop defaults accept component key references to apply style changes based upon component hierarchy. In the following example, v-btn and MyButton swap colors when nested within a v-card component.
import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components'
export default createVuetify({
aliases: {
MyButton: VBtn,
},
defaults: {
MyButton: {
color: 'primary',
variant: 'tonal',
},
VBtn: {
color: 'secondary',
variant: 'flat',
},
VCard: {
MyButton: { color: 'secondary' },
VBtn: { color: 'primary' },
},
},
})