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/lib/plugin')

exports.plugins.push(
  new VuetifyLoaderPlugin()
)

You can also provide a custom match function to import your own project's components too:

// webpack.config.js

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

exports.plugins.push(
  new VuetifyLoaderPlugin({
    /**
     * This function will be called for every tag used in each vue component
     * It should return an array, the first element will be inserted into the
     * components array, the second should be a corresponding import
     *
     * originalTag - the tag as it was originally used in the template
     * kebabTag    - the tag normalised to kebab-case
     * camelTag    - the tag normalised to PascalCase
     * path        - a relative path to the current .vue file
     * component   - a parsed representation of the current component
     */
    match (originalTag, { kebabTag, camelTag, path, component }) {
      if (kebabTag.startsWith('core-')) {
        return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
      }
    }
  })
)

or if you're using Vue CLI:

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('VuetifyLoaderPlugin').tap(args => [{
      match (originalTag, { kebabTag, camelTag, path, component }) {
        if (kebabTag.startsWith('core-')) {
          return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
        }
      }
    }])
  }
}

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

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

Will be compiled into:

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

<script>
  import { VCard } from 'vuetify/lib'
  import CoreForm from '@/components/core/Form.vue'

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

Progressive images

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

NOTE: You must have ImageMagick, GraphicsMagick, or sharp installed for this to work

Add progressiveImages to the plugin options:

exports.plugins.push(
  new VuetifyLoaderPlugin({
    progressiveImages: true
  })
)

And away you go!

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

Loops and dynamic paths

progressiveImages 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">

Configuration

progressiveImages: true can be replaced with an object for advanced configuration

new VuetifyLoaderPlugin({
  progressiveImages: {
    size: 12, // Use higher-resolution previews
    sharp: true // Use sharp instead of ImageMagick
  }
})

Options

size

Type: Number Default: 9

The minimum dimensions of the generated preview images in pixels

resourceQuery

Type: RegExp Default: /vuetify-preload/

Override the resource qury to match v-img URLs

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:

new VuetifyLoaderPlugin({
  progressiveImages: {
    resourceQuery: /lazy\?vuetify-preload/
  }
})

sharp

Type: Boolean Default: false

Use sharp instead of GM for environments without ImageMagick. This will result in lower-quality images

graphicsMagick

Type: Boolean Default: false

Use GraphicsMagic instead of ImageMagick