Overview
Sendo uma framework de componentes, o Vuetify sempre crescerá horizontalmente. Dependendo do seu projeto, um pequeno pacote pode ser um requisito. O sistema à la carte permite você selecionar os componentes a serem importados, reduzindo drasticamente o tamanho do seu projeto. Se você já possui o template a-la-carte instalado, você pode pular o guia.
Importanto componentes
Tree shaking only works with webpack 4 in production mode
O pacote transform-imports não é necessário para o uso dos componentes a-la-carte, mas simplifica o processo de importá-los, portanto é altamente recomendado. Ele permite que você use uma sintaxe mais concisa ao importar componentes.
The options object that you pass as the second argument to Vue.use can also include both a directives and a transitions property.
Se você não está usando o pacote transform-imports, você terá que importar cada componente desta forma:
Estilos necessários
Para obter todos os estilos necessários, precisamos importá-los no stylus. Para que o webpack possa lidar com isso, você precisará instalar stylus e stylus-loader pelo npm.
Agora você precisará colocar o stylus no ponto de entrada da sua aplicação. Este é o mesmo lugar onde você está importando Vue e Vuetify (geralmente main.js ouapp.js). Tenha em mente que exigir isso em seu App.vue principal pode aumentar o tempo de carregamento, pois ele é processado novamente quando você faz alterações.
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.