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.
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
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-expansion-panel-content will not be available.
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
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.
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.
When using the
vuetify-loader, there are a few scenarios which will require manual importing of 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 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.