See all articles

Adding a custom loader in a Vue CLI app

Reading time: 2 min

A project required me to add a custom loader called SVG sprite loader. I placed the loader code inside vue-config.js, but was suprised to see the loader not getting applied.

The reason was due to Vue CLI already providing a Webpack rule for SVG images. To know what rules are already added, Vue CLI provides the inspect command.

In my case I used vue inspect --rule svg to get the rule for SVGs:

  test: /\.(svg)(\?.*)?$/,
  use: [
    /* config.module.rule('svg').use('file-loader') */
      loader: 'file-loader',
      options: {
        name: 'img/[name].[hash:8].[ext]'

If you want to see all the rules, I recommend outputting the list into a file, instead of the terminal, by using vue inspect > output.js.

So how do you make sure your rule gets applied? You first will need to clear the default rule before your loader:

module.exports = {
  chainWebpack: config => {
    /* Remove the default rule */
    const svgRule = config.module.rule('svg');


    /* Custom SVG loader */
        .tap(options => {
          const newOptions = {
            symbolId: '[name][hash]'

          return { ...options, ...newOptions };
Next Simple Sitemap For Vue Router