\n\n## Automatic Imports\n`@applaud/vuetify-loader` will automatically import all Vuetify components as you use them\n\n```js\n// webpack.config.js\n\nconst { VuetifyLoaderPlugin } = require('@applaud/vuetify-loader')\n\nexports.plugins.push(\n new VuetifyLoaderPlugin()\n)\n```\n\nYou can also provide a custom match function to import your own project's components too:\n```js\n// webpack.config.js\n\nconst { VuetifyLoaderPlugin } = require('@applaud/vuetify-loader')\n\nexports.plugins.push(\n new VuetifyLoaderPlugin({\n /**\n * This function will be called for every tag used in each vue component\n * It should return an array, the first element will be inserted into the\n * components array, the second should be a corresponding import\n *\n * originalTag - the tag as it was originally used in the template\n * kebabTag - the tag normalised to kebab-case\n * camelTag - the tag normalised to PascalCase\n * path - a relative path to the current .vue file\n * component - a parsed representation of the current component\n */\n match (originalTag, { kebabTag, camelTag, path, component }) {\n if (kebabTag.startsWith('core-')) {\n return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]\n }\n }\n })\n)\n```\n\nor if you're using Vue CLI:\n```js\n// vue.config.js\n\nmodule.exports = {\n chainWebpack: config => {\n config.plugin('VuetifyLoaderPlugin').tap(args => [{\n match (originalTag, { kebabTag, camelTag, path, component }) {\n if (kebabTag.startsWith('core-')) {\n return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]\n }\n }\n }])\n }\n}\n```\n\n```html\n\n \n \n ...\n \n \n\n\n\n```\n\nWill be compiled into:\n\n```html\n\n \n \n ...\n \n \n\n\n\n```\n\n## Progressive images\n\n`@applaud/vuetify-loader` can automatically generate low-res placeholders for the `v-img` component\n\n**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\n\nAdd `progressiveImages` to the plugin options:\n```js\nexports.plugins.push(\n new VuetifyLoaderPlugin({\n progressiveImages: true\n })\n)\n\n// vue-cli\nmodule.exports = {\n chainWebpack: config => {\n config.plugin('VuetifyLoaderPlugin').tap(args => [{\n progressiveImages: true\n }])\n }\n}\n```\n\nAnd away you go!\n```html\n\n```\n\n**NOTE:** The src must follow [vue-loader's transform rules](https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules)\n\n### Loops and dynamic paths\n\n`progressiveImages` only works on static paths, for use in a loop you have to `require` the image yourself:\n\n```html\n\n```\n\n### Configuration\n\n`progressiveImages: true` can be replaced with an object for advanced configuration\n\n```js\nnew VuetifyLoaderPlugin({\n progressiveImages: {\n size: 12, // Use higher-resolution previews\n sharp: true // Use sharp instead of ImageMagick\n }\n})\n```\n\n#### Options\n\n##### `size`\n\nType: `Number`\nDefault: `9`\n\nThe minimum dimensions of the generated preview images in pixels\n\n##### `resourceQuery`\n\nType: `RegExp`\nDefault: `/vuetify-preload/`\n\nOverride the resource qury to match v-img URLs\n\nIf you only want some images to have placeholders, add `?lazy` to the end of the request:\n```html\n\n```\n\nAnd modify the regex to match:\n```js\nnew VuetifyLoaderPlugin({\n progressiveImages: {\n resourceQuery: /lazy\\?vuetify-preload/\n }\n})\n```\n\n##### `sharp`\n\nType: `Boolean`\nDefault: `false`\n\nUse sharp instead of GM for environments without ImageMagick. This will result in lower-quality images\n\n##### `graphicsMagick`\n\nType: `Boolean`\nDefault: `false`\n\nUse GraphicsMagic instead of ImageMagick\n\n##### `registerStylesSSR`\n\nType: `Boolean`\nDefault: `false`\n\nRegister Vuetify styles in [vue-style-loader](https://github.com/vuejs/vue-style-loader).\n\nThis fixes styles not being loaded when doing SSR (for example when using [@nuxtjs/vuetify](https://github.com/nuxt-community/vuetify-module)).\nAs Vuetify imports styles with JS, without this option, they do not get picked up by SSR.\n\n⚠️ This option requires having `manualInject` set to `true` in [`vue-style-loader`](https://github.com/vuejs/vue-style-loader#options) config.\n","readmeFilename":"README.md"}
![\"Become](\"https://c5.patreon.com/external/logo/become_a_patron_button.png\"){kind=logo}
\n \n