How to add support for PDF files with Vue Cli 3?

3
votes

I need to configure Webpack to accept and handle PDF files with url-loader via the Vue Cli (latest).

vue.config.js

module.exports = {
  configureWebpack: {
    rules: [
      {
        test: /\.(pdf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'files/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

Does the above look correct or am I missing something? The docs on this are here: https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#basic-configuration

I get the error:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. Configuration has an unknown property 'rules'.

I'm obviously missing something in my understanding here about how to augment the generated Webpack config in Vue.

Help appreciated! Thanks

2
javascriptwebpackvue.jsvue-cli

2 Answers

6
votes

Turns out, I was missing another level for the rules array.

module: {}

So it should be in full:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(pdf)(\?.*)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                name: 'files/[name].[hash:8].[ext]'
              }
            }
          ]
        }
      ]
    }
  }
}

My bad! Hopefully this helps someone out there.

0
votes

For coffeescript and vue-cli version 3, I needed to npm install -D coffee-loader and then create this file as vue.config.js:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.coffee$/,
          use: [
            {
              loader: 'coffee-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        }
      ]
    }
  }
}