Using with Vue-CLI 4 produces no results

Been using this plugin for a while now on a few sites and it’s always worked great. Up to now I’ve been using it in conjunction with Laravel Mix for webpack management. Recently we did a refactor on a site in-progress to use Vue-CLI (4.2.2), and now there seems to be no output whatsoever. The svg sprite isn’t created and there are no errors to indicate what’s happening. Here’s the webpack config in vue.config.js that’s always worked with Laravel Mix:

module.exports = {
  configureWebpack: {
    plugins: [
      new SVGSpritemapPlugin("src/assets/images/svg/*.svg", {
        output: {
          filename: "../src/assets/fonts/icons.svg",
          svg4everybody: false,
          svgo: {
            removeTitle: true,
            removeStyleElement: true,
            cleanupNumericValue: true
          },
          chunk: {
            keep: true
          }
        },
        sprite: {
          prefix: false
        }
      })
    ]
  }
};

As for versions:

• Vue: 2.6.11
• Vue-cli: 4.2.2
• svg-spritemap-webpack-plugin: 3.5.4

Again, things were working great until switching to Vue-cli. No matter what I do, no svg file is output, and there are no errors. Hoping someone might have some ideas. Thanks!

[drewrawitz]

@cascornelissen Thanks so much for spending some time on it! You helped point me in the right direction 😄

I was able to get it to work by adding the following to my vue.config.js file under the configureWebpack object:

devServer: {
  writeToDisk: (filePath) => {
    return /icon-sprite.svg$/.test(filePath);
  },
  watchOptions: {
    ignored: [/node_modules/, /public\/icon-sprite.svg/],
  }
},

Vue is configured to watch the public folder, so this will fix the infinite loop issue. When you first run yarn serve it loops like three times for some reason, but then it stops and starts to successfully work!

Hopefully, this will help someone else. Thanks again!

[AtlantaJones]

@drewrawitz Hey sorry for my tardiness. No, we eventually realized that new svgs were getting added to the sprite only on “build”, so just kind of chalked it up to a minor inconvenience. After all, new icons aren’t added often. Just have to document what’s needed.

Based on the current suggestions, definitely going to try them out and see if it also works for us. Thanks to you and @cascornelissen !!