Información general
Al ser un framework de componentes, Vuetify siempre crecerá horizontalmente. Dependiendo de tu proyecto, un tamaño de paquete pequeño podría ser un requerimiento. El sistema A la carta te permite escoger cuáles componentes importar, lo que reduce drásticamente el tamaño de tu proyecto una vez compilado. Si ya tienes la plantilla a-la-carte instalada, puedes ir directo a la guía.
Importando componentes
Tree shaking only works with webpack 4 in production mode
El paquete transform-imports no es necesario para usar componentes a-la-carta pero simplifica el proceso de importarlos, por lo que es altamente recomendado. Te permite utilizar una sintaxis más concisa cuando estás importando los componentes.
The options object that you pass as the second argument to Vue.use can also include both a directives and a transitions property.
Si o estás usando el paquete de transform-impports, deberás importar cada componente así:
Estilos requeridos
Para lograr obtener todos los estilos requeridos, necesitamos importarlos en stylus. Y para que webpack pueda manejar esto, deberás instalar stylus y el stylus-loader desde npm
Ahora necesitarás requerir stylus desde el entry point de tu aplicación. Este es el mismo lugar desde el que estás importando Vue y Vuetify (generalmente main.js o app.js). Toma en cuenta que requerirlos en tu App.vue puede causar tiempos lentos de carga porque estará siendo re-procesado cuando hagas cambios al archivo.
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.