Want to take a look at our new docs? Our new docs are now in beta. Have fun!

How to add webpack plugins?

In your nuxt.config.js file, under the build option, you can pass webpack plugins, the same way you would do it in a webpack.config.js file.

In this example we add the webpack built-in ProvidePlugin for automatically loading JavaScript modules (lodash and jQuery) instead of having to import or require them everywhere.

import webpack from 'webpack'

export default {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        // global modules
        $: 'jquery',
        _: 'lodash'
      })
    ]
  }
}

Note: You might not need jQuery in a Vue-based app.

With Nuxt, you can also control plugins execution context: if they are meant to be run on the client or in the server builds (or differentiating dev and prod builds) within build.extend, where you can manually pass webpack plugins too.

Contributors

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us