Import module into vue.config.js

Question

I want to import the npm package vue-remove-attributes to remove my "data-testid" attributes from the DOM. https://www.npmjs.com/package/vue-remove-attributes

In the README they say i've to pass the module to vue-loader in my webpack config. I have webpack installed but my only config file is vue.config.js which looks like this:

module.exports = {
  publicPath: "./",
  productionSourceMap: false,
  lintOnSave: process.env.NODE_ENV !== "production",
}

I tried importing the module like this

const createAttributeRemover = require('vue-remove-attributes');

module.exports = {
  publicPath: "./",
  productionSourceMap: false,
  lintOnSave: process.env.NODE_ENV !== "production",

  configureWebpack: {
    plugins: new createAttributeRemover(),
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: {
            loader: "vue-loader",
            options: {
              compilerOptions: {
                modules: [createAttributeRemover("data-testid")]
              }
            }
          }
        }
      ]
    }
  },
};

but that doesn't seem to work. Any ideas how I can import the npm package in my vue config?

user_1206267 · Answer

You didn't tag vue-cli, but you're using the configureWebpack property so it's my assumption that you are. You need to modify the existing loader rule. You can tap into it with chaining and add your options:

chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // modify the options...
          options.compilerOptions.modules = [createAttributeRemove('data-testid')]
          return options
        })

Import module into vue.config.js

1 Answers