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 3 plugin have this enabled by default.

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.

vue.config.js installation

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

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.

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.

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 3 and webpack projects.

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="my-component"> 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.

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.

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

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise