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.
Treeshaking will only work with Webpack 4 in production mode. This is automatic when using Vue CLI 3.
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.
In order to take advantage of a-la-carte components, you must import Vuetify from vuetify/lib.
The options object that you pass as the second argument to Vue.use can also include a components, directives and a transitions property.
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.
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.
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.
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.
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="my-component"> 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, wherever the custom component is used.
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.
Ready for more? Continue reading with: