Treeshaking

Being a component framework, Vuetify will always grow horizontally. Depending on your project, a small bundle size may be a requirement.


Automatic treeshaking

Treeshaking enables you to drastically lower your build size by only including the components you actually use in the final bundle. Vuetify comes with plugins for both Webpackand vitethat enable automatic treeshaking.

Install webpack-plugin-vuetifyor vite-plugin-vuetifythen enable it in your bundler configuration. Make sure the vuetify plugin comes after the vue plugin or it won’t work correctly.

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.

src/main.js
  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.

src/plugins/vuetify.js
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.

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

<script setup>
  import { VCard, VCardText, VCardTitle } from 'vuetify/components/VCard'
</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:

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

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

  const btn = shallowRef(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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub