Configuration
By default, Nuxt.js is configured to cover most use cases. This default configuration can be overwritten with the
nuxt.config.js
file.
build
This option lets you configure various settings for the build
step, including loaders
, filenames
, the webpack
config and transpilation
.
Documentation about build
integration
css
This option lets you define the CSS files, modules, and libraries you want to include globally (on every page).
Documentation about css
integration
dev
This option lets you define the development
or production
mode of Nuxt.js (important when you use Nuxt.js programatically)
Documentation about dev
integration
env
This option lets you define environment variables that are available to both client and server.
Documentation about env
integration
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.
Documentation about generate integration
head
This option lets you define all default meta tags for your application.
Documentation about head integration
loading
This option lets you customize the loading component that Nuxt.js uses by default.
Documentation about loading
integration
modules
With this option you can add Nuxt.js modules to your project.
Documentation about modules
integration
modulesDir
This option lets you define the node_modules folder of your Nuxt.js Application.
Documentation about modulesDir
integration
plugins
This option lets you define JavaScript plugins that should be run before instantiating the root Vue.js application.
Documentation about plugins
integration
rootDir
This option lets you define the workspace of your Nuxt.js application.
Documentation about rootDir
integration
router
With the router
option you overwrite the default Nuxt.js configuration of Vue Router.
Documentation about router
integration
server
This option lets you configure the connection variables for the server instance of your Nuxt.js application.
Documentation about server
integration
srcDir
This option lets you define the source directory of your Nuxt.js application.
Documentation about srcDir
integration
dir
This option lets you define the custom directories of your Nuxt.js application.
Documentation about dir
integration
transition
This option lets you define the default properties of the page transitions.
Documentation about transition
integration
Asynchronous Configuration
If you need to populate some options (e.g. the head) with asynchronous data (e.g. coming from an API), you have the possibility to return a promise. Here is an example:
/*
axios-module cannot be used in nuxt.config.js
You need to import axios and configure it again
*/
import axios from 'axios'
export default async () => {
const data = await axios.get('endpoint')
return {
head: {
title: data.head.title,
//... rest of config
}
}
}