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

a-la-carte

The main part of this webpack loader should only be used when utilizing the a-la-carte functionality of vuetify together with custom themes.

Read more at the vuetify documentation.

Progressive images

vuetify-loader can automatically generate low-res placeholders for the v-img component

NOTE: You must have ImageMagick installed for this to work

Just some small modifications to your webpack rules:

const { VuetifyProgressiveModule } = require('vuetify-loader')


  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      compilerOptions: {
        modules: [VuetifyProgressiveModule]
      }
    }
  },
  {
    test: /\.(png|jpe?g|gif)$/,
    resourceQuery: /vuetify-preload/,
    use: [
      'vuetify-loader/progressive-loader',
      {
        loader: 'url-loader',
        options: { limit: 8000 }
      }
    ]
  }

And away you go!

<v-img src="@/assets/some-image.jpg"></v-img>

Loops and dynamic paths

VuetifyProgressiveModule only works on static paths, for use in a loop you have to require the image yourself:

<v-img v-for="i in 10" :src="require(`@/images/image-${i}.jpg?vuetify-preload`)" :key="i">

Lazy-loading specific images

If you only want some images to have placeholders, add ?lazy to the end of the request:

<v-img src="@/assets/some-image.jpg?lazy"></v-img>

And modify the regex to match:

resourceQuery: /lazy\?vuetify-preload/

Configuration

{
  size: number // The minimum dimensions of the preview images, defaults to 9px
  // TODO
  // limit: number // Source images smaller than this value (in bytes) will not be transformed
}

Combining with another url-loader rule

Use Rule.oneOf to prevent corrupt output when there are multiple overlapping rules:

{
  test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)(\?.*)?$/,
  oneOf: [
    {
      test: /\.(png|jpe?g|gif)$/,
      resourceQuery: /vuetify-preload/,
      use: [
        'vuetify-loader/src/progressive-loader',
        {
          loader: 'url-loader',
          options: { limit: 8000 }
        }
      ]
    },
    {
      loader: 'url-loader',
      options: { limit: 8000 }
    }
  ]
}