Overview

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. If your project is using the vue-cli-plugin-vuetify plugin, this is automatically handled for you.

Tree shaking only works with webpack 4 in production mode

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-loaderwill 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. You DO NOT need to do this if you are using the Vuetify plugin.

Importing

// You still need to register Vuetify itself
// src/plugins/vuetify.js

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

Vue.use(Vuetify)
                  
export default new Vuetify({ ... })

The options object that you pass as the second argument to Vue.use can also include both a directives and a transitions property.

vue.config.js installation

You can opt out of using the cli plugin and instead manually configure the loader via the configure webpack option.

// vue.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin()
    ]
  }
}

Webpack installation

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ]
}

Required styles

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. If you are working in a project where you do not have access to the cli, you can manually included the required packages.

yarn add sass sass-loader fibers deepmerge -D
// OR
npm install sass sass-loader fibers deepmerge --dev

Custom dynamic imports

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:

// SomeComponent.vue

<template>
  <v-data-iterator content-tag="v-layout">
    ...
  </v-data-iterator>
</template>

// src/plugins/vuetify.js

import Vuetify, { VLayout } from 'vuetify/lib'

Vue.use(Vuetify, {
  components: { VLayout }
})

export default new Vuetify({ ... })

Dynamic components used with <component :is="component"> can be registered locally:

<template>
  <component :is="button ? 'v-btn' : 'v-chip'">
</template>

<script>
  import { VBtn, VChip } from 'vuetify/lib'

  export default {
    components: { VBtn, VChip },
    data: () => ({ button: false })
  }
</script>

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.

Manually importing

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.

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar,
  VFadeTransition
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    VFadeTransition
  },
  directives: {
    Ripple
  }
})

export default new Vuetify({ ... })

johnleider/a-la-carte.md