vuetify-loader

What is vuetify-loader?

The vuetify-loader package is a webpack loader for Vuetify, a popular Vue.js UI library. It provides functionalities to automatically import Vuetify components and styles, optimize the bundle size, and enable tree-shaking for Vuetify components.

What are vuetify-loader's main functionalities?

Automatic Component Import

This feature allows you to automatically import Vuetify components as you use them in your Vue files, eliminating the need to manually import each component.

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

Tree Shaking

Tree shaking is a feature that allows you to include only the components you actually use in your project, reducing the final bundle size.

module.exports = {
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin({
        match (originalTag, { kebabTag, camelTag, path, component }) {
          if (kebabTag.startsWith('core-')) {
            return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
          }
        }
      })
    ]
  }
};

Style Imports

This feature automatically imports the necessary styles for the Vuetify components you use, ensuring that your application looks as expected without manual style imports.

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

Other packages similar to vuetify-loader

babel-plugin-import

babel-plugin-import is a Babel plugin for importing components on demand. It is commonly used with libraries like Ant Design and Material-UI. Unlike vuetify-loader, which is a webpack plugin, babel-plugin-import works at the Babel level and can be used with various UI libraries.

unplugin-vue-components

unplugin-vue-components is a Vite/webpack plugin that automatically imports Vue components as you use them. It supports multiple UI libraries, including Vuetify, and offers similar functionalities to vuetify-loader, such as automatic component import and tree shaking.

vite-plugin-components

vite-plugin-components is a Vite plugin that automatically imports Vue components. It is similar to vuetify-loader but is specifically designed for Vite, offering automatic component import and tree shaking for various UI libraries, including Vuetify.

README

vuetify-loader

Automatic Imports

vuetify-loader will automatically import all Vuetify components as you use them

// webpack.config.js
const { VuetifyLoaderPlugin } = require('vuetify-loader')

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin({ autoImport: true }), // Enabled by default
  ],
}

// plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify()

<template>
  <v-card>
    ...
  </v-card>
</template>

<script>
  export default {
    ...
  }
</script>

Will be compiled into:

<template>
  <v-card>
    ...
  </v-card>
</template>

<script>
  import { VCard } from 'vuetify/components'

  export default {
    components: {
      VCard,
    },
    ...
  }
</script>

Style loading

Customising variables

// webpack.config.js
const { VuetifyLoaderPlugin } = require('vuetify-loader')

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin({ styles: 'expose' }),
  ],
}

// plugins/vuetify.js
import './main.scss'
import { createVuetify } from 'vuetify'

export default createVuetify()

// main.scss
@use 'vuetify/styles' with (
  $color-pack: false,
  $utilities: false,
);

Remove all style imports

// webpack.config.js
const { VuetifyLoaderPlugin } = require('vuetify-loader')

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin({ styles: 'none' }),
  ],
}

// plugins/vuetify.js
import { createVuetify } from 'vuetify'

export default createVuetify()

Progressive images

Coming soon...