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. New projects created with the vue-cli plugin have this enabled by default.
Importing components
Tree shaking only works with webpack 4 in production mode
Vuetify v1.3 brings support for tree-shaking with webpack. Simply import your components from 'vuetify/lib'
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.
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.
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.
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.
Now any Vuetify component used in a template will be automatically added to an in-component import like above.
Limitations
When using the vuetify-loader, there are a few scenarios which will require manual importing of components.
Dynamic components
v-data-iterator can use any component via the content-tag prop. This component must be registered globally:
Dynamic components used with <component :is=""> can be registered locally:
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 wherever the custom component is used.