The build Property

Nuxt.js lets you customize the webpack configuration for building your web application as you want.

analyze

Nuxt.js use webpack-bundle-analyzer to let you visualize your bundles and how to optimize them.

  • Type: Boolean or Object
  • Default: false

If an object, see available properties here.

Example (nuxt.config.js):

module.exports = {
  build: {
    analyze: true
    // or
    analyze: {
      analyzerMode: 'static'
    }
  }
}

INFO: You can use the command nuxt build --analyze or nuxt build -a to build your application and launch the bundle analyzer on http://localhost:8888

babel

  • Type: Object

Customize babel configuration for JS and Vue files.

Default:

{
  presets: ['vue-app']
}

Example (nuxt.config.js):

module.exports = {
  build: {
    babel: {
      presets: ['es2015', 'stage-0']
    }
  }
}

extend

  • Type: Function

Extend the webpack configuration manually for the client & server bundles.

The extend is called twice, one time for the server bundle, and one time for the client bundle. The arguments of the method are:

  1. Webpack config object
  2. Object with the folowing keys (all boolean): dev, isClient, isServer

Example (nuxt.config.js):

module.exports = {
  build: {
    extend (config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.devtool = 'eval-source-map'
      }
    }
  }
}

If you want to see more about our default webpack configuration, take a look at our webpack directory.

extractCSS

  • Type: Boolean
    • Default: false

Enables Common CSS Extraction using vue SSR guidelines.

Using extract-text-webpack-plugin to extract the CSS in the main chunk into a separate CSS file (auto injected with template), which allows the file to be individually cached. This is recommended when there is a lot of shared CSS. CSS inside async components will remain inlined as JavaScript strings and handled by vue-style-loader.

filenames

  • Type: Object

Customize bundle filenames

Default:

{
  manifest: 'manifest.[hash].js',
  vendor: 'vendor.bundle.[chunkhash].js',
  app: 'nuxt.bundle.[chunkhash].js',
  css: 'common.[chunkhash].css'
}

Example (nuxt.config.js):

module.exports = {
  build: {
    filenames: {
      vendor: 'vendor.[hash].js',
      app: 'app.[chunkhash].js'
    }
  }
}

To understand a bit more about the use of manifest and vendor, take a look at this Webpack documentation.

plugins

  • Type: Array
  • Default: []

Add Webpack plugins

Example (nuxt.config.js):

const webpack = require('webpack')

module.exports = {
  build: {
    plugins: [
      new webpack.DefinePlugin({
        'process.VERSION': require('./package.json').version
      })
    ]
  }
}

postcss

  • Type: Array

Customize postcss options

Default:

[
  require('autoprefixer')({
    browsers: ['last 3 versions']
  })
]

Example (nuxt.config.js):

module.exports = {
  build: {
    postcss: [
      require('postcss-nested')(),
      require('postcss-responsive-type')(),
      require('postcss-hexrgba')(),
      require('autoprefixer')({
        browsers: ['last 3 versions']
      })
    ]
  }
}

publicPath

  • Type: String
  • Default: '/_nuxt/'

Nuxt.js lets you upload your dist files to your CDN for maximum performances, simply set the publicPath to your CDN.

Example (nuxt.config.js):

module.exports = {
  build: {
    publicPath: 'https://cdn.nuxtjs.org'
  }
}

Then, when launching nuxt build, upload the content of .nuxt/dist/ directory to your CDN and voilĂ !

ssr

  • Type: Object

Use ssr option to customize vue SSR bundle renderer

module.exports = {
  build: {
    ssr: {
        runInNewContext: false
    }
  }
}

Learn more about available options on Vue SSR API Reference. It is recommended to not use this option as Nuxt.js is already providing best SSR defaults and misconfiguration might lead to SSR problems.

templates

  • Type: Array
    • Items: Object

Nuxt.js allows you provide your own templates which will be rendered based on nuxt configuration This feature is specially useful for using with modules.

Example (nuxt.config.js):

module.exports = {
  build: {
      templates: [
         {
           src: '~/modules/support/plugin.js', // src can be absolute or relative
           dst: 'support.js', // dst is relative to project `.nuxt` dir
           options: { // Options are provided to template as `options` key
               live_chat: false
           }
         }
      ]
  }
}

Templates are rendered using lodash.template you can learn more about using them here.

vendor

Nuxt.js lets you add modules inside the vendor.bundle.js file generated to reduce the size of the app bundle. It's really useful when using external modules (like axios for example)

  • Type: Array
    • Items: String

To add a module/file inside the vendor bundle, add the build.vendor key inside nuxt.config.js:

module.exports = {
  build: {
    vendor: ['axios']
  }
}

You can also give a path to a file, like a custom lib you created:

module.exports = {
  build: {
    vendor: [
      'axios',
      '~/plugins/my-lib.js'
    ]
  }
}

watch

  • Type: Array
    • Items: String

You can provide your custom files to watch and regenerate after changes. This feature is specially useful for using with modules.

module.exports = {
  build: {
      watch: [
          '~/.nuxt/support.js'
      ]
  }
}

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!