Gathering detailed insights and metrics for vuetify-loader
Gathering detailed insights and metrics for vuetify-loader
📦 Webpack and Vite plugins for treeshaking Vuetify components and more
Installations
npm install vuetify-loaderDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Releases
31
Languages
5
TypeScript
JavaScript
Vue
HTML
SCSS
TypeScript (64.27%)
JavaScript (26.92%)
Vue (5.6%)
HTML (1.66%)
SCSS (1.56%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
518 Stars
256 Commits
92 Forks
26 Watchers
3 Branches
38 Contributors
Updated on Jul 11, 2025
Maintainers
7
Package Meta Information
Latest Version
1.9.2
Package Id
vuetify-loader@1.9.2
Unpacked Size
38.93 kB
Size
14.10 kB
File Count
45
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
5
This package is for Vuetify 2 only, for Vuetify 3 see next
vuetify-loader
Automatic Imports
vuetify-loader will automatically import all Vuetify components as you use them
1// webpack.config.js 2 3const { VuetifyLoaderPlugin } = require('vuetify-loader') 4 5exports.plugins.push( 6 new VuetifyLoaderPlugin() 7)
You can also provide a custom match function to import your own project's components too:
1// webpack.config.js
2
3const { VuetifyLoaderPlugin } = require('vuetify-loader')
4
5exports.plugins.push(
6 new VuetifyLoaderPlugin({
7 /**
8 * This function will be called for every tag used in each vue component
9 * It should return an array, the first element will be inserted into the
10 * components array, the second should be a corresponding import
11 *
12 * originalTag - the tag as it was originally used in the template
13 * kebabTag - the tag normalised to kebab-case
14 * camelTag - the tag normalised to PascalCase
15 * path - a relative path to the current .vue file
16 * component - a parsed representation of the current component
17 */
18 match (originalTag, { kebabTag, camelTag, path, component }) {
19 if (kebabTag.startsWith('core-')) {
20 return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
21 }
22 }
23 })
24)or if you're using Vue CLI:
1// vue.config.js 2 3module.exports = { 4 chainWebpack: config => { 5 config.plugin('VuetifyLoaderPlugin').tap(args => [{ 6 match (originalTag, { kebabTag, camelTag, path, component }) { 7 if (kebabTag.startsWith('core-')) { 8 return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`] 9 } 10 } 11 }]) 12 } 13}
1<template> 2 <core-form> 3 <v-card> 4 ... 5 </v-card> 6 </core-form> 7</template> 8 9<script> 10 export default { 11 ... 12 } 13</script>
Will be compiled into:
1<template> 2 <core-form> 3 <v-card> 4 ... 5 </v-card> 6 </core-form> 7</template> 8 9<script> 10 import { VCard } from 'vuetify/lib' 11 import CoreForm from '@/components/core/Form.vue' 12 13 export default { 14 components: { 15 VCard, 16 CoreForm 17 }, 18 ... 19 } 20</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:
1exports.plugins.push( 2 new VuetifyLoaderPlugin({ 3 progressiveImages: true 4 }) 5) 6 7// vue-cli 8module.exports = { 9 chainWebpack: config => { 10 config.plugin('VuetifyLoaderPlugin').tap(args => [{ 11 progressiveImages: true 12 }]) 13 } 14}
And away you go!
1<v-img src="@/assets/some-image.jpg"></v-img>
NOTE: The src must follow vue-loader's transform rules
Loops and dynamic paths
progressiveImages only works on static paths, for use in a loop you have to require the image yourself:
1<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
1new VuetifyLoaderPlugin({
2 progressiveImages: {
3 size: 12, // Use higher-resolution previews
4 sharp: true // Use sharp instead of ImageMagick
5 }
6})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:
1<v-img src="@/assets/some-image.jpg?lazy"></v-img>
And modify the regex to match:
1new VuetifyLoaderPlugin({
2 progressiveImages: {
3 resourceQuery: /lazy\?vuetify-preload/
4 }
5})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
registerStylesSSR
Type: Boolean
Default: false
Register Vuetify styles in vue-style-loader.
This fixes styles not being loaded when doing SSR (for example when using @nuxtjs/vuetify). As Vuetify imports styles with JS, without this option, they do not get picked up by SSR.
⚠️ This option requires having manualInject set to true in vue-style-loader config.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/vuetifyjs/.github/SECURITY.md:1
- Info: Found linked content: github.com/vuetifyjs/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/vuetifyjs/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/vuetifyjs/.github/SECURITY.md:1
Reason
0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 2/30 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 2 are checked with a SAST tool
Reason
63 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.6
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More