Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
VuetifyLoaderPlugin
✓ const { VuetifyLoaderPlugin } = require('vuetify-loader')
✗ const VuetifyLoaderPlugin = require('vuetify-loader')
Default export is not available; must destructure named export. CommonJS is the standard as this is a Webpack plugin.
VuetifyLoaderPlugin (ESM)
✓ import { VuetifyLoaderPlugin } from 'vuetify-loader'
✗ import VuetifyLoaderPlugin from 'vuetify-loader'
When using ESM in your Webpack config (e.g., with .mjs), import the named export. Default import is undefined.
VuetifyLoaderPlugin via Vue CLI chainWebpack
✓ config.plugin('VuetifyLoaderPlugin').use(require('vuetify-loader').VuetifyLoaderPlugin, [options])
✗ config.plugin('VuetifyLoaderPlugin').use(VuetifyLoaderPlugin, [options])
In vue.config.js, you must require the plugin inside the chainWebpack function. Direct reference to imported variable may fail due to module scope.
Shows minimal Webpack 4/5 configuration with vuetify-loader, including VueLoaderPlugin and progressiveImages option.
// webpack.config.js
const { VuetifyLoaderPlugin } = require('vuetify-loader');
const Vuetify = require('vuetify');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
output: { filename: 'bundle.js' },
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new VuetifyLoaderPlugin({
progressiveImages: true
})
]
};
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'vuetify-loader'
vuetify-loader is not installed or typo in package name.
fixRun: npm install vuetify-loader --save-dev, and ensure import path is correct.
TypeError: VuetifyLoaderPlugin is not a constructor
Default import used instead of named destructured import.
fixUse: const { VuetifyLoaderPlugin } = require('vuetify-loader'); 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
VueLoaderPlugin is missing or misconfigured. vuetify-loader relies on vue-loader rules.
fixAdd new VueLoaderPlugin() to webpack plugins before VuetifyLoaderPlugin.
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.
Webpack config lacks mode; this is a generic warning but can cause confusion when vuetify-loader behaves differently in dev vs prod.
fixAdd mode: 'production' or mode: 'development' to your webpack config.
Error: Child compilation failed: Module not found: Error: Can't resolve 'vuetify/lib'
Vuetify 3 installed but using vuetify-loader v1 which expects Vuetify 2 path structure.
fixInstall Vuetify 2 (npm i vuetify@^2) or use vuetify-loader@next for Vuetify 3.
Audit
Dependencies
vuerequiredPeer dependency for Vue 2.x (^2.7.2 required for v1.9.x)
vuetifyrequiredPeer dependency for Vuetify 2.x (^1.3.0 || ^2.0.0)
webpackrequiredPeer dependency for Webpack 4 or 5
sharpoptionalOptional peer dependency for progressive image generation (alternative to ImageMagick/GraphicsMagick)
gmoptionalOptional peer dependency for progressive image generation (GraphicsMagick)
pugoptionalOptional peer dependency for Pug template support