This package is for Vuetify 2 only, for Vuetify 3 see master
vuetify-loader will automatically import all Vuetify components as you use them
// webpack.config.js
const { VuetifyLoaderPlugin } = require("vuetify-loader");
exports.plugins.push(new VuetifyLoaderPlugin());You can also provide a custom match function to import your own project's components too:
// webpack.config.js
const { VuetifyLoaderPlugin } = require("vuetify-loader");
exports.plugins.push(
new VuetifyLoaderPlugin({
/**
* This function will be called for every tag used in each vue component
* It should return an array, the first element will be inserted into the
* components array, the second should be a corresponding import
*
* originalTag - the tag as it was originally used in the template
* kebabTag - the tag normalised to kebab-case
* camelTag - the tag normalised to PascalCase
* path - a relative path to the current .vue file
* component - a parsed representation of the current component
*/
match(originalTag, { kebabTag, camelTag, path, component }) {
if (kebabTag.startsWith("core-")) {
return [
camelTag,
`import ${camelTag} from '@/components/core/${camelTag.substring(
4
)}.vue'`,
];
}
},
})
);or if you're using Vue CLI:
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.plugin("VuetifyLoaderPlugin").tap((args) => [
{
match(originalTag, { kebabTag, camelTag, path, component }) {
if (kebabTag.startsWith("core-")) {
return [
camelTag,
`import ${camelTag} from '@/components/core/${camelTag.substring(
4
)}.vue'`,
];
}
},
},
]);
},
};<template>
<core-form>
<v-card> ... </v-card>
</core-form>
</template>
<script>
export default {
...
}
</script>Will be compiled into:
<template>
<core-form>
<v-card> ... </v-card>
</core-form>
</template>
<script>
import { VCard } from 'vuetify-wcag/lib'
import CoreForm from '@/components/core/Form.vue'
export default {
components: {
VCard,
CoreForm
},
...
}
</script>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:
exports.plugins.push(
new VuetifyLoaderPlugin({
progressiveImages: true,
})
);
// vue-cli
module.exports = {
chainWebpack: (config) => {
config.plugin("VuetifyLoaderPlugin").tap((args) => [
{
progressiveImages: true,
},
]);
},
};And away you go!
<v-img src="@/assets/some-image.jpg"></v-img>NOTE: The src must follow vue-loader's transform rules
progressiveImages only works on static paths, for use in a loop you have to require the image yourself:
<v-img
v-for="i in 10"
:src="require(`@/images/image-${i}.jpg?vuetify-preload`)"
:key="i"
></v-img>progressiveImages: true can be replaced with an object for advanced configuration
new VuetifyLoaderPlugin({
progressiveImages: {
size: 12, // Use higher-resolution previews
sharp: true, // Use sharp instead of ImageMagick
},
});Type: Number
Default: 9
The minimum dimensions of the generated preview images in pixels
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:
<v-img src="@/assets/some-image.jpg?lazy"></v-img>And modify the regex to match:
new VuetifyLoaderPlugin({
progressiveImages: {
resourceQuery: /lazy\?vuetify-preload/,
},
});Type: Boolean
Default: false
Use sharp instead of GM for environments without ImageMagick. This will result in lower-quality images
Type: Boolean
Default: false
Use GraphicsMagic instead of ImageMagick
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.
manualInject set to true in vue-style-loader config.