Overview

Being a component framework, Vuetify will always grow horizontally. Depending on your project, a small package size may be a requirement. The A la carte system enables you to pick and choose which components to import, drastically lowering your build size.

For a pre-built project demonstrating single component imports, install the a-la-carte template from the cli, using the command vue init vuetifyjs/a-la-carte. Some of our other templates also include options for enabling a-la-carte components. More information is located in the Quick start guide.

Importing components

Vuetify v1.3 brings support for tree-shaking with webpack. Simply import your components from 'vuetify/lib'

Tree shaking only works with webpack 4 in production mode

// main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar,
  transitions
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    transitions
  },
  directives: {
    Ripple
  }
})

The options object that you pass as the second argument to Vue.use can also include both a directives and a transitions property.

You can also import components in .vue files, as seen below. When doing so it's important that you import all named exports, and then destructure them in components. Otherwise child components such as v-card-text or v-expansion-panel-content will not be available.

// .vue files
import { VCard, VCardText, VCardMedia } from 'vuetify/lib'

export default {
  components: {
    VCard,
    VCardText,
    VCardMedia
  }
}

Required styles

To obtain all the required styles, we need to import them in stylus. In order for webpack to handle this, you will need to install stylus and the stylus-loader from npm.

$ npm install --save-dev stylus stylus-loader
# or
$ yarn add --dev stylus stylus-loader

Now you will need to require the stylus from the entry point of your application. This is the same place where you're importing Vue and Vuetify (usually main.js or app.js). Keep in mind, requiring this in your main App.vue can cause slow load times as it is re-processed when you make updates.

// src/main.js
import 'vuetify/src/stylus/app.styl'

For a more detailed explanation on how to setup your application to handle stylus, please navigate to the theme page.

vuetify-loader

Keeping track of all the components you're using can be a real chore, so we wrote a webpack loader to help you. vuetify-loader will automatically import 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.

// You still need to register Vuetify itself
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify)
// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ]
}

// or vue.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin()
    ]
  }
}

Now any Vuetify component used in a template will be automatically added to an in-component import like above.

Limitations

Vuetify-loader can't do everything, there are still some scenarios where you'll need to import components manually

Dynamic components

v-data-iterator can use any component via the content-tag prop. This component must be registered globally:

// SomeComponent.vue
<template>
  <v-data-iterator content-tag="v-layout">
  ...
// main.js
import Vuetify, { VLayout } from 'vuetify'

Vue.use(Vuetify, {
  components: { VLayout }
})

Dynamic components used with <component :is=""> can be registered locally:

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

Functional components

Functional components are inlined at runtime by vue, and cannot have a components property in their options. Any vuetify components used in a custom functional component must either be registered globally (recommended), or locally whereever the custom component is used.

Pre-processors (pug, HAML)

Vuetify-loader currently cannot parse non-html templates such as pug. Anything used in these templates must be imported manually as above.