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. If you already have the a-la-carte template installed, you can skip to the guide.

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

The transform-imports package is not necessary to use a-la-carte components, but simplifies the process of importing them, and is therefore highly recommended. It allows you to use a more concise syntax when importing components.

// .babelrc
["transform-imports", {
 "vuetify": {
   "transform": "vuetify/es5/components/${member}",
   "preventFullImport": true
 }
}]

Keep in mind, both the Vuetify and VApp components are required to use Vuetify

// main.js
import Vue from 'vue'
import App from './App.vue'
import {
 Vuetify, // required
 VApp, // required
 VNavigationDrawer,
 VFooter,
 VToolbar,
 transitions
} from 'vuetify'
import { Ripple } from 'vuetify/es5/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.

If you are not using the transform-imports package, you will need to import each component like this:

// main.js
// Without `transform-imports` package
import Vue from 'vue'
import VApp from 'vuetify/es5/components/VApp'
import Vuetify from 'vuetify/es5/components/Vuetify'
import transitions from 'vuetify/es5/components/transitions'
import directives from 'vuetify/es5/directives'

Vue.use(Vuetify, {
  components: {
     VApp,
     Vuetify
  },
  directives,
  transitions,
})

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 * as VCard from 'vuetify/es5/components/VCard'

export default {
 components: {
   ...VCard
 }
}

Required styles

In order 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
require('vuetify/src/stylus/app.styl')

UI Component Name List

Some components such as VLayout or VFlex are for organizational reasons included in other components, in this case VGrid. To know which component to import you can review the following table.

MarkupComponentGroup
directivesdirectives
<v-alert>VAlertVAlert
<v-app>VAppVApp
<v-autocomplete>VAutocompleteVAutocomplete
<v-avatar>VAvatarVAvatar
<v-badge>VBadgeVBadge
<v-bottom-nav>VBottomNavVBottomNav
<v-bottom-sheet>VBottomSheetVBottomSheet
<v-bottom-sheet-transition>VBottomSheetTransitiontransitions
<v-breadcrumbs>VBreadcrumbsVBreadcrumbs
Rows per page:
10
1-10 of 95