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

Keeping track of all the components you're using can be a real chore. The vuetify-loader alleviates this pain by automatically importing 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.

Importing

In order to take advantage of a-la-carte components, you must import Vuetify from vuetify/lib.

content_copy

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

vue.config.js installation

While it is not recommended, you can opt out of using the cli plugin and instead manually configure the loader via the configure webpack option from vue-cli-3.

content_copy

Webpack installation

You can also explicitly install the loader for webpack based projects. Similar to the vue.config.js setup, you simply add the loader to your project's webpack plugins.

content_copy

Required styles

When you import from vuetify/lib the baseline framework styles are pulled in as well. Each component is individually responsible for their styles and will be compiled just the same. If you are using vue-cli-3 and the vue-cli-plugin-vuetify plugin, this is done for you automatically and you can skip this section. If you are working in a project where you do not have access to the cli, you can manually included the required packages.

content_copy

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

After installation you will still need to configure your webpack.config.js to parse .sass files. For more information on how to do this with fibers, checkout the official documentation.

Custom dynamic imports

The vuetify-loader also allows you to write your own custom match functions to import your own project's components as well. This can be done in both vue-cli and webpack projects.

content_copy
content_copy

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:

content_copy
content_copy

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

content_copy

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.

Manually importing

Components can be manually imported when not using the Vuetify loader. You will also want to do this when using dynamic components and the vuetify-loader as it only parses explicit usage. This commonly occurs when using the built in Vue <component is="my-component">. More information about dynamic components is in the official Vue documentation.

content_copy

You can also import components in .vue files, as seen below.

content_copy
Edit this page | language on Github