vuetify-loader

    1.7.3 • Public • Published

    vuetify-loader

    Become a Patron

    Automatic Imports

    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/lib'
      import CoreForm from '@/components/core/Form.vue'
    
      export default {
        components: {
          VCard,
          CoreForm
        },
        ...
      }
    </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:

    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

    Loops and dynamic paths

    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">

    Configuration

    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
      }
    })

    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:

    <v-img src="@/assets/some-image.jpg?lazy"></v-img>

    And modify the regex to match:

    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

    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.

    Keywords

    none

    Install

    npm i vuetify-loader

    DownloadsWeekly Downloads

    282,807

    Version

    1.7.3

    License

    MIT

    Unpacked Size

    39.6 kB

    Total Files

    46

    Last publish

    Collaborators

    • amajesticpotatoe
    • bdeo
    • elijahkotyluk
    • jacekkarczmarczyk
    • johnjleider
    • kaelwd
    • nekosaur