Components not listed in the sidebar are not available yet.
Vuetify 2 documentation can be found on vuetifyjs.com
# 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.
# vuetify-loader
Keeping track of all the components you’re using can be a real chore. The vuetify-loader alleviates this pain by automatically importing all the Vuetify components you use, where you use them. This will also make code-splitting more effective, as webpack will only load the components required for that chunk to be displayed.
New projects created with our Vue CLI plugin have this enabled by default, regardless if you used Vite or Vue CLI to create your project.
# Importing from lib
In order to use treeshaking, you must import createVuetify
from vuetify/lib.
import { createVuetify } from 'vuetify/lib'
export const vuetify = createVuetify()
import { createApp } from 'vue'
import { vuetify } from './plugins/vuetify'
import App from './App.vue'
createApp(App).use(vuetify).mount('#app')
# Manual configuration
It is also possible to use the vuetify-loader without our Vue CLI plugin.
# Vue CLI project
To manually configure the vuetify-loader in a Vue CLI project, use the configureWebpack option.
const { VuetifyPlugin } = require('webpack-plugin-vuetify')
module.exports = {
configureWebpack: {
plugins: [
new VuetifyPlugin()
],
},
}
# Webpack project
You can also explicitly install the loader for webpack-based projects. Similar to the vue.config.js setup, you simply add the loader to your project’s webpack plugins.
const { VuetifyPlugin } = require('webpack-plugin-vuetify')
module.exports = {
plugins: [
new VuetifyPlugin()
],
}
Treeshaking will only work with Webpack in production mode.
# Vite project
In Vite projects as with Webpack, add the plugin to the plugins section. But make sure you are using the vite-plugin-vuetify package instead.
const { VuetifyPlugin } = require('vite-plugin-vuetify')
module.exports = {
plugins: [
new VuetifyPlugin()
],
}
# Limitations
When using the vuetify-loader, there are a few scenarios which will require manually importing components.
# Dynamic components
When using dynamic components the vuetify-loader 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:
<!-- Vue Component -->
<template>
<component :is="button ? 'v-btn' : 'v-chip'" />
</template>
<script>
import { VBtn, VChip } from 'vuetify/lib'
export default {
components: { VBtn, VChip },
data: () => ({ button: false }),
}
</script>
# Manual imports
Components can be manually imported when not using the vuetify-loader.
import { createApp } from 'vue'
import {
createApp,
VCard,
VRating,
VToolbar,
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/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/lib'
export default {
components: {
VCard,
VCardText,
VCardTitle,
}
}
</script>