# 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>

Ready for more?

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