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

Question

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?

Gastrocnemius

Generally a-la-carte means you chunks of something from a bigger something. The simplest example is vuetify by John Leider, you can either get the whole library or you do a-la-carte by getting just the components you need without getting the whole thing. Say, you just need the button component and text field component. I hope it helps. – Gallop

Answer 1

À 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.

Arun

Answer 2

First of all, you didn't find that option in the docs because it's in fact a vuetify plugin option. When "a-la-carte" components are enabled, the file /plugins/vuetify.js should contain:

import Vue from 'vue'
import {
 Vuetify,
 VApp,
 //other vuetify components
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   //other vuetify components
 }
})

and your babel.config.js file should be changed to prevent a full vuetify import with the "transform-imports" plugin.

Second, up until vuetify v1.3.0-alpha.0, "a la carte" was useful if your wanted to minimize your webpack vendor bundle, but it's quite tedious to have to selectively import vuetify components, especially during development. Plus, Webpack has evolved a lot since the introduction of "a la carte components".

For these reasons, as of vuetify 1.3.0-alpha.0, the dev team is working on a way to completely eliminate the need for a la carte components by using Webpack 4 tree shaking features (AKA dead code elimination) through vuetify-loader. Those features are expected to be added to the vuetify official plugin in order to get automatic "a la carte components".

So, to address your second question (if you should use a-la-carte), the answer is no, not anymore. Here's how you can setup your vue-cli 3 project by yourself to use this feature:

• Install vuetify-loader as a dev dependency: npm install -D vuetify-loader
• Import vuetify from 'vuetify/lib' instead of 'vuetify' in your vuetify.js file.

code:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

• Register vuetify-loader as a webpack plugin in your vue.config.js file (if it doesn't exist, create the file in your project's root).

code:

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
   configureWebpack: {
     plugins: [
        new VuetifyLoaderPlugin(),
    ]
   }
 // ...other vue-cli plugin options...
} 

• In case you were already using a-la-carte, make sure to remove "transform-imports" from the list of your babel plugins (typically found in babel.config.js)

• Remember that tree shaking is set to work only in production mode, so if you're using the flag --watch or --mode development with your npm run build command, you shoudln't expect your bundle size to be reduced

I hope it helps

Numbles

Why the 'Import vuetify from 'vuetify/lib' instead of 'vuetify' in your vuetify.js file.'? – Hoarfrost