Single component importing
Being a component framework, Vuetify will always grow horizontally. Depending on your project requirements, package size may be heavily scrutinized and important for your particular use-case. Vuetify allows you to easily import only what you need, drastically lowering its footprint.
The implementation details for this feature will very likely change drastically in future versions. The a-la-carte feature should be considered to be in beta
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.

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.
npm install --save-dev babel-plugin-transform-imports
# or
yarn add --dev babel-plugin-transform-imports
When using the transform-imports package, you will need to add the following to the plugins section of your .babelrc file.
["transform-imports", {
  "vuetify": {
    "transform": "vuetify/es5/components/${member}",
    "preventFullImport": true
To import and use components, use the following code in your entry point.
import {
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
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
import Vuetify from 'vuetify/es5/components/Vuetify'
import VApp from 'vuetify/es5/components/VApp'
import VNavigationDrawer from 'vuetify/es5/components/VNavigationDrawer'
// etc
Be aware that both the Vuetify and VApp components are required to use Vuetify.

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
For a more detailed explanation on how to setup your application to handle stylus, please navigate to the theme page.
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):


Using custom themes with a-la-carte components is done exactly the same way as described on the theme page.