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-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.
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 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:
<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.