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/VBtn'

export default createVuetify({
  aliases: {
    MyButton: VBtn,
    MyButtonAlt: VBtn,
  },
})

Although treeshaking is automatically applied during production builds, it is advantageous to import components by specifying their full path in development mode. For instance, using vuetify/components/VBtn instead of vuetify/components ensures that the compiler loads fewer components, thus optimizing performance.

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/VBtn'

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/VBtn'

export default createVuetify({
  aliases: {
    MyButton: VBtn,
  },
  defaults: {
    MyButton: {
      color: 'primary',
      variant: 'tonal',
    },
    VBtn: {
      color: 'secondary',
      variant: 'flat',
    },
    VCard: {
      MyButton: { color: 'secondary' },
      VBtn: { color: 'primary' },
    },
  },
})