Document how to configure `VuetifyProgressiveModule` with vue cli 3

The default vue cli 3.x projects use the so-called “no config” webpack. It’s not clear to me (only me?) how to add VuetifyProgressiveModule to these vue cli 3.x projects.

Thank you for this library!

[acu192]

Okay, here is my vue.config.js file now (very similar to the link you posted, but some differences):

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const { VuetifyProgressiveModule } = require('vuetify-loader');

module.exports = {
  chainWebpack:  config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.modules = [VuetifyProgressiveModule];
        return options;
      });
    const imagesRule = config.module.rule('images');
    imagesRule.uses.clear();
    config.module
      .rule('images')
        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
        .oneOf('progressiveImages')
          .test(/\.(png|jpe?g|gif)$/)
          .resourceQuery(/vuetify-preload/)
          .use('progressiveLoader')
            .loader('vuetify-loader/progressive-loader')
            .end()
          .use('notProgressive')
            .loader('url-loader')
            .options({ limit: 8000, fallback: { loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]' } } })
            .end();
    config.module
      .rule('images')
        .oneOf('imagesOther')
          .merge({ loader: 'url-loader', options: { limit: 8000, fallback: { loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]' } } } });
  },
};

After writing that file, the first build attempt it complained that there was no gm module. I was happy to see it complain, as this indicated it was trying to do something new! So, I npm install gm --save. (I have also already compiled and installed ImageMagick.)

After installing gm, it now seems to work, at first glance. I.e. It builds without error.

However, when inspecting the dist/ directory, I find that it hasn’t modified my images at all. They are identical to what is in my src/assets/ folder.

On the vue side, here is the relevant code I’m using:

<v-img :src="require('@/assets/IMG_0219.jpg?vuetify-preload')">

Any ideas for why it’s not generated progressive JPEGs?

[alexroldan]

modify vue.config.js

module.exports = { transpileDependencies: ["vuetify"],

chainWebpack: (config) => {
    config.module
        .rule("vue")
        .use("vue-loader")
        .loader("vue-loader")
        .tap((options) => {
            options.transformAssetUrls = {
                "v-img": "src",
            };

            return options;
        });
    config.plugin("VuetifyLoaderPlugin").tap((args) => [
        {
            progressiveImages: true,
        },
    ]);
},

};

you should restart your server

npm run serve