Treeshaking

Being a component framework, Vuetify will always grow horizontally. Depending on your project, a small bundle size may be a requirement. Treeshaking enables you to drastically lower your build size by only including the components you actually use in the final bundle.

Automatic treeshaking

Vuetify comes with plugins for both webpack and vite that enable automatic treeshaking.
Install webpack-plugin-vuetify or vite-plugin-vuetify then enable it in your bundler configuration. Make sure the vuetify plugin comes after the vue plugin or it won’t work correctly.

import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default {
  plugins: [
    vue(),
    vuetify(),
  ],
}

And that’s it! Vuetify components and directives will be automatically imported into your application wherever they are used. If you had any wildcard imports they can now be removed.

  import 'vuetify/styles'
  import { createVuetify } from 'vuetify'
- import * as components from 'vuetify/components'
- import * as directives from 'vuetify/directives'

Manual imports

Components can be manually imported when not using the loader plugin.

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import { VCard } from 'vuetify/components/VCard'
import { VRating } from 'vuetify/components/VRating'
import { VToolbar } from 'vuetify/components/VToolbar'
import { Ripple } from 'vuetify/directives'

const vuetify = createVuetify({
  components: {
    VCard,
    VRating,
    VToolbar,
  },
  directives: {
    Ripple,
  },
})

export default vuetify

You can also import components locally in .vue files, as seen below.

<template>
  <v-card>
    <v-card-title>...</v-card-title>
    <v-card-text>...</v-card-text>
  </v-card>
</template>

<script>
  import { VCard, VCardText, VCardTitle } from 'vuetify/components/VCard'

  export default {
    components: {
      VCard,
      VCardText,
      VCardTitle,
    }
  }
</script>

Limitations

When using the loader plugin, there are a few scenarios which will require manually importing components.

Dynamic components

When using dynamic components the plugin is unable to parse which vuetify components are being rendered. This commonly occurs when using the built-in Vue <component>. More information about dynamic components can be found in the official Vue documentation.

Dynamic components using <component> can be registered locally:

<template>
  <component :is="button ? 'v-btn' : 'v-chip'" />
</template>

<script>
  import { VBtn } from 'vuetify/components/VBtn'
  import { VChip } from 'vuetify/components/VChip'

  export default {
    components: { VBtn, VChip },
    data: () => ({ button: false }),
  }
</script>

Import groups

All components are available at both vuetify/components and vuetify/components/<group>. Use of the latter is preferred however as it only loads files that are needed. Treeshaking will still work in production builds if you use vuetify/components, but during development it will cause a performance hit by loading styles even for components you aren’t using.