{"id":20698,"library":"vuetify-loader","title":"vuetify-loader (Vuetify 2)","description":"Vuetify-loader is a Webpack plugin that enables automatic tree-shaking and on-demand imports of Vuetify 2 components, reducing bundle size. It also supports progressive image loading with low-res placeholders. Current stable version is 1.9.2, released 2022-08-10, with maintenance mode only as Vuetify 3 is now available. Key differentiators: auto-imports components used in templates, supports custom match functions for project components, and integrates with Vue CLI. Requires Vue 2.7+, Vuetify 2.x, and Webpack 4/5. Not compatible with Vuetify 3 (use vuetify-loader v2+).","status":"maintenance","version":"1.9.2","language":"javascript","source_language":"en","source_url":"https://github.com/vuetifyjs/vuetify-loader","tags":["javascript"],"install":[{"cmd":"npm install vuetify-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vuetify-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuetify-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2.x (^2.7.2 required for v1.9.x)","package":"vue","optional":false},{"reason":"Peer dependency for Vuetify 2.x (^1.3.0 || ^2.0.0)","package":"vuetify","optional":false},{"reason":"Peer dependency for Webpack 4 or 5","package":"webpack","optional":false},{"reason":"Optional peer dependency for progressive image generation (alternative to ImageMagick/GraphicsMagick)","package":"sharp","optional":true},{"reason":"Optional peer dependency for progressive image generation (GraphicsMagick)","package":"gm","optional":true},{"reason":"Optional peer dependency for Pug template support","package":"pug","optional":true}],"imports":[{"note":"Default export is not available; must destructure named export. CommonJS is the standard as this is a Webpack plugin.","wrong":"const VuetifyLoaderPlugin = require('vuetify-loader')","symbol":"VuetifyLoaderPlugin","correct":"const { VuetifyLoaderPlugin } = require('vuetify-loader')"},{"note":"When using ESM in your Webpack config (e.g., with .mjs), import the named export. Default import is undefined.","wrong":"import VuetifyLoaderPlugin from 'vuetify-loader'","symbol":"VuetifyLoaderPlugin (ESM)","correct":"import { VuetifyLoaderPlugin } from 'vuetify-loader'"},{"note":"In vue.config.js, you must require the plugin inside the chainWebpack function. Direct reference to imported variable may fail due to module scope.","wrong":"config.plugin('VuetifyLoaderPlugin').use(VuetifyLoaderPlugin, [options])","symbol":"VuetifyLoaderPlugin via Vue CLI chainWebpack","correct":"config.plugin('VuetifyLoaderPlugin').use(require('vuetify-loader').VuetifyLoaderPlugin, [options])"}],"quickstart":{"code":"// webpack.config.js\nconst { VuetifyLoaderPlugin } = require('vuetify-loader');\nconst Vuetify = require('vuetify');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\nmodule.exports = {\n  entry: './src/main.js',\n  output: { filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      }\n    ]\n  },\n  plugins: [\n    new VueLoaderPlugin(),\n    new VuetifyLoaderPlugin({\n      progressiveImages: true\n    })\n  ]\n};","lang":"javascript","description":"Shows minimal Webpack 4/5 configuration with vuetify-loader, including VueLoaderPlugin and progressiveImages option."},"warnings":[{"fix":"Upgrade to vuetify-loader@next for Vuetify 3, or stay on v1.x for Vuetify 2.","message":"Vuetify 3 is not supported by vuetify-loader v1.x. Use vuetify-loader v2 (next branch) for Vuetify 3.","severity":"breaking","affected_versions":">=1.0.0 <2.0.0"},{"fix":"For Vuetify 3 projects, install webpack-plugin-vuetify and follow its documentation.","message":"VuetifyLoaderPlugin is deprecated as of Vuetify 3; use webpack-plugin-vuetify from the next branch instead.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Install sharp (npm i sharp -D) or ensure gm/imagemagick is available in PATH.","message":"Progressive images require one of graphicsmagick, imagemagick, or sharp to be installed on the system. Missing dependency results in no placeholder generation and no error.","severity":"gotcha","affected_versions":">=1.5.0"},{"fix":"Upgrade Vue to ^2.7.2 or use vuetify-loader@1.8.x if stuck on Vue 2.6.","message":"Vue 2.7 is required for v1.9.0+. Earlier versions of vuetify-loader (<1.9.0) do not support Vue 2.7.","severity":"breaking","affected_versions":">=1.9.0"},{"fix":"Ensure match returns [camelTag, `import ${camelTag} from '...'`] or undefined.","message":"The 'match' function must return an array of two elements: [camelTag, importString]. Returning undefined/null is ignored; returning a malformed array breaks compilation.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use require(`@/assets/${dynamic}.jpg?vuetify-preload`) inside the template for dynamic images.","message":"ResourceQuery for progressive images only works with static paths. Dynamic paths (e.g., :src=\"imagePath\") must use require() with ?vuetify-preload query.","severity":"gotcha","affected_versions":">=1.5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install vuetify-loader --save-dev, and ensure import path is correct.","cause":"vuetify-loader is not installed or typo in package name.","error":"Module not found: Error: Can't resolve 'vuetify-loader'"},{"fix":"Use: const { VuetifyLoaderPlugin } = require('vuetify-loader');","cause":"Default import used instead of named destructured import.","error":"TypeError: VuetifyLoaderPlugin is not a constructor"},{"fix":"Add new VueLoaderPlugin() to webpack plugins before VuetifyLoaderPlugin.","cause":"VueLoaderPlugin is missing or misconfigured. vuetify-loader relies on vue-loader rules.","error":"ERROR in ./src/App.vue?vue&type=style&index=0&lang=css Module build failed (from ./node_modules/vue-loader/lib/index.js): TypeError: Cannot read property 'match' of undefined"},{"fix":"Add mode: 'production' or mode: 'development' to your webpack config.","cause":"Webpack config lacks mode; this is a generic warning but can cause confusion when vuetify-loader behaves differently in dev vs prod.","error":"WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment."},{"fix":"Install Vuetify 2 (npm i vuetify@^2) or use vuetify-loader@next for Vuetify 3.","cause":"Vuetify 3 installed but using vuetify-loader v1 which expects Vuetify 2 path structure.","error":"Error: Child compilation failed: Module not found: Error: Can't resolve 'vuetify/lib'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}