{"id":20808,"library":"webpack-plugin-vuetify","title":"webpack-plugin-vuetify","description":"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.","status":"active","version":"3.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/vuetifyjs/vuetify-loader","tags":["javascript","typescript"],"install":[{"cmd":"npm install webpack-plugin-vuetify","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-plugin-vuetify","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-plugin-vuetify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for compiling Vue single-file components","package":"@vue/compiler-sfc","optional":false},{"reason":"Required peer dependency (Vue 3)","package":"vue","optional":false},{"reason":"Required peer dependency (Vuetify 3)","package":"vuetify","optional":false},{"reason":"Required peer dependency (Webpack 5)","package":"webpack","optional":false}],"imports":[{"note":"CommonJS required in Webpack config; doesn't support ESM default import.","wrong":"import VuetifyPlugin from 'webpack-plugin-vuetify'","symbol":"VuetifyPlugin","correct":"const { VuetifyPlugin } = require('webpack-plugin-vuetify')"},{"note":"Named export in ESM context; default export is not provided.","wrong":"import VuetifyPlugin from 'webpack-plugin-vuetify'","symbol":"VuetifyPlugin (ESM)","correct":"import { VuetifyPlugin } from 'webpack-plugin-vuetify'"},{"note":"Pre-v3 package was vuetify-loader; renamed to webpack-plugin-vuetify. VuetifyLoaderPlugin is from the old package.","wrong":"const { VuetifyPlugin } = require('vuetify-loader')","symbol":"VuetifyLoaderPlugin (legacy)","correct":"const { VuetifyLoaderPlugin } = require('vuetify-loader')"},{"note":"Options type is available; styles can be 'none', 'sass', or an object with configFile.","wrong":"new VuetifyPlugin({ autoImport: true, styles: { configFile: 'src/settings.scss' } })","symbol":"VuetifyPlugin options","correct":"new VuetifyPlugin({ autoImport: true, styles: { configFile: 'src/settings.scss' } })"}],"quickstart":{"code":"// webpack.config.js\nconst { VuetifyPlugin } = require('webpack-plugin-vuetify');\n\nmodule.exports = {\n  plugins: [\n    new VuetifyPlugin({ autoImport: true }), // Enabled by default\n  ],\n};\n\n// plugins/vuetify.js\nimport 'vuetify/styles';\nimport { createVuetify } from 'vuetify';\n\nexport default createVuetify();\n\n// App.vue\n<template>\n  <v-card>\n    <v-card-title>Hello</v-card-title>\n  </v-card>\n</template>","lang":"javascript","description":"Shows minimal setup: webpack config with VuetifyPlugin, Vuetify createVuetify, and template usage with auto-imported VCard."},"warnings":[{"fix":"Replace require('vuetify-loader') with require('webpack-plugin-vuetify') and use VuetifyPlugin instead of VuetifyLoaderPlugin.","message":"Package renamed from 'vuetify-loader' to 'webpack-plugin-vuetify' in v3. Old imports break.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Upgrade Node.js to ^18 or >=20.","message":"Requires Node.js ^18.0.0 or >=20.0.0; older Node versions not supported.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Import VuetifyPlugin from 'webpack-plugin-vuetify' instead.","message":"VuetifyLoaderPlugin (from vuetify-loader) is deprecated; use VuetifyPlugin from webpack-plugin-vuetify.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Use require instead of import in webpack.config.js.","message":"Webpack config must use CommonJS; ESM imports will cause Module parse errors.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Explicitly set autoImport: false if you don't want auto-importing.","message":"autoImport option is enabled by default; if you want to disable, set autoImport: false.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure settings.scss contains @forward 'vuetify/settings' with (...).","message":"When using styles: { configFile }, the config file must forward 'vuetify/settings' with @forward; otherwise SASS errors.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use alternative SSR style management (e.g., vue-style-loader, SSR-specific config).","message":"SSR style injection support removed in v3 (was in vuetify-loader v1.7.0).","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install webpack-plugin-vuetify --save-dev and change imports to use 'webpack-plugin-vuetify'.","cause":"Package renamed to webpack-plugin-vuetify.","error":"Module not found: Can't resolve 'vuetify-loader'"},{"fix":"Use const { VuetifyPlugin } = require('webpack-plugin-vuetify'); or import { VuetifyPlugin } from 'webpack-plugin-vuetify';","cause":"Using default import instead of named import: import VuetifyPlugin from 'webpack-plugin-vuetify'","error":"TypeError: VuetifyPlugin is not a constructor"},{"fix":"Update Node.js to v18 or v20+.","cause":"Running on an older Node.js version.","error":"Error: Node version >=18.0.0 required"},{"fix":"Add @forward 'vuetify/settings' with (...) to the top of your settings.scss.","cause":"Using styles: { configFile } but settings.scss doesn't forward Vuetify settings.","error":"SassError: Undefined variable."},{"fix":"Run npm install @vue/compiler-sfc --save-dev.","cause":"Missing peer dependency @vue/compiler-sfc.","error":"Cannot find module '@vue/compiler-sfc'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}