Search code examples
webpackvuejs2vuetify.jsvue-cli-3

What is a-la-carte components? Should i use it?

When starting a new project using vue-cli it asks a few questions to customize the setup. Generally the project name, description, whether to use eslint for linting, karma and mocha for testing etc. This time it asked me 

? Use a-la-carte components?

I searched for it in the vue-cli docs but didn't come across anything. So can anyone tell me what is "a-la-carte components" and if I should use it?

Solution

  • À la carte is an English language loan phrase meaning "according to the menu." It refers to "food that can be ordered as separate items, rather than part of a set meal."

    So if you use a-la-carte components, it means that you only include components that you need (want) to use, instead of getting all of them

    Vuetify example:

    Vuetify allows you to easily import only what you need, drastically lowering its footprint.

    import {
 Vuetify,
 VApp,
 VNavigationDrawer,
 VFooter,
 VList,
 VBtn
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   VNavigationDrawer,
   VFooter,
   VList,
   VBtn
 }
})

    EDIT 2018/11/14:

    Since vuetify 1.3.0,
    vuetify-loader (included in vuetify cli install)
    automatically handles your application's a-la-carte needs, which means it will automatically import all Vuetify components as you use them.