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.