Vue.js: Invalid options in vue.config.js: "plugins" is not allowed

Question

I have a webpack project and I want to use Stylelint for SCSS linting. I have followed the instructions on the Stylelint website and installed:

"stylelint": "^12.0.1",
"stylelint-webpack-plugin": "^1.1.2",

And then I have put this in vue.config.js:

plugins: [
  new StylelintPlugin({
    files: '**/*.s?(a|c)ss'
  })
],

And when I start the server I get this:

Invalid options in vue.config.js: "plugins" is not allowed

I have searched high and low but I have not found anything. Any help would be appreciated.

Here is the vue.config.js:

const StylelintPlugin = require('stylelint-webpack-plugin')

module.exports = {

  plugins: [
    new StylelintPlugin({
      files: '**/*.s?(a|c)ss'
    })
  ],

  assetsDir: 'asset',

  configureWebpack: config => {
    config.entry = '@/wrapper/main.js'
  },

  chainWebpack: config => {
    config.plugins.delete('prefetch')
  },

  lintOnSave: undefined,
  runtimeCompiler: true
}

Answer 1

The easiest way to tweak the webpack config is providing an object to the configureWebpack option in vue.config.js:

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [new MyAwesomeWebpackPlugin()]
  }
}

The object will be merged into the final webpack config using webpack-merge.

Checkout https://cli.vuejs.org/guide/webpack.html for more information.

Answer 2

Have you try with this syntax :

const StylelintPlugin = require('stylelint-webpack-plugin')

module.exports = {

  assetsDir: 'asset',

  configureWebpack: config => {
    config.entry = '@/wrapper/main.js'
  },

  chainWebpack: config => {
    config.plugins.delete('prefetch')

    config.plugin('stylelint').use(StylelintPlugin, [
      {
        files: '**/*.s?(a|c)ss'
      }
    ])
  },

  lintOnSave: undefined,
  runtimeCompiler: true
}

That is how we managed to make it work.

Answer 3

Maybe this will help someone

// vue.config.js
module.exports = {
 configureWebpack: {
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 }
}

// In my case i was doing below and was facing the same error
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
    configureWebpack: {
        plugins: [
               new PrerenderSPAPlugin({
                // Required - The path to the webpack-outputted app to prerender.
                staticDir: path.join(__dirname, 'dist'),
                // Required - Routes to render.
                routes: ['/', '/page-path', '/another-page'],
            })
        ]
    },
    lintOnSave: false
}

https://cli.vuejs.org/guide/webpack.html#simple-configuration