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' },
    },
  },
})