By default, Nuxt.js is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file.

nuxt.config.js

build

This option lets you configure various settings for the build step, including loaders, filenames, the webpack config and transpilation.

export default {
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }
}

css

This option lets you define the CSS files, modules, and libraries you want to include globally (on every page).

export default {
  css: ['~/assets/css/main.css', '~/assets/css/animations.scss']
}

You can omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css array in your nuxt config file.

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

By omitting the extension, if you have a css file and decide to change to use sass for example, you won't have to update your nuxt.config as it will use the new extension once the filename remains the same.

dev

This option lets you define the development or production mode of Nuxt.js (important when you use Nuxt.js programatically)

export default {
  dev: process.env.NODE_ENV !== 'production'
}

env

This option lets you define environment variables that are available to both client and server.

export default {
  env: {
    baseUrl: process.env.BASE_URL || baseUrl
  }
}

generate

This option lets you set up parameter values for every dynamic route in your application that will be transformed into HTML files by Nuxt.js.

export default {
  generate: {
    dir: 'gh_pages', // gh_pages/ instead of dist/
    subFolders: false // HTML files are generated according to the route path
  }
}

head

export default {
    head: {
    title: 'my title',
    meta: [
      { charset: 'utf-8' },
            .....
        ]
    }
}

This option lets you define all default meta tags for your application.

loading

This option lets you customize the loading component that Nuxt.js uses by default.

export default {
  loading: {
    color: '#fff'
  }
}

modules

With this option you can add Nuxt.js modules to your project.

export default {
  modules: ['@nuxtjs/axios']
}

modulesDir

The modulesDir property is used to set the modules directories for path resolving. For example: Webpack's resolveLoading, nodeExternals and postcss. The configuration path is relative to options.rootDir (default: process.cwd()).

export default {
  modulesDir: ['../../node_modules']
}

Setting this field may be necessary if your project is organized as a Yarn workspace-styled mono-repository.

plugins

This option lets you define JavaScript plugins that should be run before instantiating the root Vue.js application.

export default {
  plugins: ['~/plugins/url-helpers.js']
}

router

With the router option you can overwrite the default Nuxt.js configuration of Vue Router.

export default {
  router: {
    linkExactActiveClass: 'text-primary'
  }
}

server

This option lets you configure the connection variables for the server instance of your Nuxt.js application.

import path from 'path'
import fs from 'fs'

export default {
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

srcDir

This option lets you define the source directory of your Nuxt.js application.

export default {
  srcDir: 'client/'
}

Project structure example with your Nuxt.js application in the source directory.

**-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| client/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| static/
------| store/**

dir

This option lets you define custom names of your Nuxt.js directories.

export default {
  pages: 'views' // Nuxt will look for the views/ instead of the pages/ folder
}

pageTransition

This option lets you define the default properties of the page transitions.

export default {
  pageTransition: 'page'
}

Other configuration files

Besides the nuxt.config.js there might be other config files in your project root, such as .eslintrc, prettier.config.json or .gitignore. These are used to configure other tools such as your linter, code formatter or your git repository and detached from the nuxt.config.js.

.gitignore

In your .gitignore file you will need to add the following so that they are ignored and not added to version control. node_modules which is where all your installed modules are. The nuxt folder which is what gets created when running the dev or build commands. The dist folder is the folder that gets created when running the generate command.

node_modules .nuxt dist

What's next