# vuetify-loader

Become a Patron

## Automatic Imports `vuetify-loader` will automatically import all Vuetify components as you use them ```js // webpack.config.js const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') exports.plugins.push( new VuetifyLoaderPlugin() ) ``` You can also provide a custom match function to import your own project's components too: ```js // webpack.config.js const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') 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: ```js // 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'`] } } }]) } } ``` ```html ``` Will be compiled into: ```html ``` ## Progressive images `vuetify-loader` can automatically generate low-res placeholders for the `v-img` component **NOTE:** You ***must*** have [ImageMagick](https://www.imagemagick.org/script/index.php), [GraphicsMagick](http://www.graphicsmagick.org/), or [sharp](https://github.com/lovell/sharp) installed for this to work Add `progressiveImages` to the plugin options: ```js exports.plugins.push( new VuetifyLoaderPlugin({ progressiveImages: true }) ) ``` And away you go! ```html ``` ### Loops and dynamic paths `progressiveImages` only works on static paths, for use in a loop you have to `require` the image yourself: ```html ``` ### Configuration `progressiveImages: true` can be replaced with an object for advanced configuration ```js new VuetifyLoaderPlugin({ progressiveImages: { size: 12, // Use higher-resolution previews sharp: true // Use sharp instead of ImageMagick } }) ``` #### 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: ```html ``` And modify the regex to match: ```js new VuetifyLoaderPlugin({ progressiveImages: { resourceQuery: /lazy\?vuetify-preload/ } }) ``` ##### `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