webpack-plugin-vuetify

3.1.3 verified Sat Apr 25 auth: no javascript

Webpack plugin for Vuetify 3 tree-shaking and automatic component imports. Current stable version is 3.1.3 (requires Node ^18.0.0 || >=20.0.0). Ships TypeScript types and supports Webpack 5. Replaces older vuetify-loader package. Key differentiators: auto-imports Vuetify components used in templates, handles style loading (none/external/sass), and supports progressive images (experimental). Peer dependencies include @vue/compiler-sfc, vue ^3.2.6, vuetify >=3, and webpack ^5.0.0. Release cadence is irregular.

Common errors

error Module not found: Can't resolve 'vuetify-loader' ↓

cause Package renamed to webpack-plugin-vuetify.

fix

npm install webpack-plugin-vuetify --save-dev and change imports to use 'webpack-plugin-vuetify'.

error TypeError: VuetifyPlugin is not a constructor ↓

cause Using default import instead of named import: import VuetifyPlugin from 'webpack-plugin-vuetify'

fix

Use const { VuetifyPlugin } = require('webpack-plugin-vuetify'); or import { VuetifyPlugin } from 'webpack-plugin-vuetify';

error Error: Node version >=18.0.0 required ↓

cause Running on an older Node.js version.

fix

Update Node.js to v18 or v20+.

error SassError: Undefined variable. ↓

cause Using styles: { configFile } but settings.scss doesn't forward Vuetify settings.

fix

Add @forward 'vuetify/settings' with (...) to the top of your settings.scss.

error Cannot find module '@vue/compiler-sfc' ↓

cause Missing peer dependency @vue/compiler-sfc.

fix

Run npm install @vue/compiler-sfc --save-dev.

Warnings

breaking Package renamed from 'vuetify-loader' to 'webpack-plugin-vuetify' in v3. Old imports break. ↓

fix Replace require('vuetify-loader') with require('webpack-plugin-vuetify') and use VuetifyPlugin instead of VuetifyLoaderPlugin.

breaking Requires Node.js ^18.0.0 or >=20.0.0; older Node versions not supported. ↓

fix Upgrade Node.js to ^18 or >=20.

deprecated VuetifyLoaderPlugin (from vuetify-loader) is deprecated; use VuetifyPlugin from webpack-plugin-vuetify. ↓

fix Import VuetifyPlugin from 'webpack-plugin-vuetify' instead.

gotcha Webpack config must use CommonJS; ESM imports will cause Module parse errors. ↓

fix Use require instead of import in webpack.config.js.

gotcha autoImport option is enabled by default; if you want to disable, set autoImport: false. ↓

fix Explicitly set autoImport: false if you don't want auto-importing.

gotcha When using styles: { configFile }, the config file must forward 'vuetify/settings' with @forward; otherwise SASS errors. ↓

fix Ensure settings.scss contains @forward 'vuetify/settings' with (...).

deprecated SSR style injection support removed in v3 (was in vuetify-loader v1.7.0). ↓

fix Use alternative SSR style management (e.g., vue-style-loader, SSR-specific config).

Install

npm install webpack-plugin-vuetify

yarn add webpack-plugin-vuetify

pnpm add webpack-plugin-vuetify

Imports

VuetifyPlugin

wrong

import VuetifyPlugin from 'webpack-plugin-vuetify'

correct

const { VuetifyPlugin } = require('webpack-plugin-vuetify')

CommonJS required in Webpack config; doesn't support ESM default import.

VuetifyPlugin (ESM)

wrong

import VuetifyPlugin from 'webpack-plugin-vuetify'

correct

import { VuetifyPlugin } from 'webpack-plugin-vuetify'

Named export in ESM context; default export is not provided.

VuetifyLoaderPlugin (legacy)
wrong
```
const { VuetifyPlugin } = require('vuetify-loader')
```
correct
```
const { VuetifyLoaderPlugin } = require('vuetify-loader')
```
Pre-v3 package was vuetify-loader; renamed to webpack-plugin-vuetify. VuetifyLoaderPlugin is from the old package.

VuetifyPlugin options

wrong

new VuetifyPlugin({ autoImport: true, styles: { configFile: 'src/settings.scss' } })

correct

new VuetifyPlugin({ autoImport: true, styles: { configFile: 'src/settings.scss' } })

Options type is available; styles can be 'none', 'sass', or an object with configFile.

Quickstart

Shows minimal setup: webpack config with VuetifyPlugin, Vuetify createVuetify, and template usage with auto-imported VCard.

// webpack.config.js
const { VuetifyPlugin } = require('webpack-plugin-vuetify');

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

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

export default createVuetify();

// App.vue
<template>
  <v-card>
    <v-card-title>Hello</v-card-title>
  </v-card>
</template>