The env property

Share environment variables between client and server.

Type: Object

Nuxt lets you create environment variables client side, also to be shared from server side.

The env property defines environment variables that should be available on the client side. They can be assigned using server side environment variables, the dotenv module ones or similar.

For nuxt versions > 2.12+, in cases where environment variables are required at runtime (not build time) it is recommended to subsitute the env property with runtimeConfig properties : publicRuntimeOptions and privateRuntimeOptions.
Learn more with our tutorial about moving from @nuxtjs/dotenv to runtime config .

Make sure to read about process.env and process.env == {} below for better troubleshooting.

nuxt.config.js

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

This lets you create a baseUrl property that will be equal to the BASE_URL server side environment variable if available or defined. If not, baseUrl in client side will be equal to 'http://localhost:3000'. The server side variable BASE_URL is therefore copied to the client side via the env property in the nuxt.config.js. Alternatively, the other value is defined (http://localhost:3000 ).

Then, I can access my baseUrl variable in 2 ways:

Via process.env.baseUrl.
Via context.env.baseUrl, see context API .

You can use the env property for giving a public token for example.

For the example above, we can use it to configure axios .

plugins/axios.js

import axios from 'axios'

export default axios.create({
  baseURL: process.env.baseUrl
})

Then, in your pages, you can import axios like this: import axios from '~/plugins/axios'

Automatic injection of environment variables

If you define environment variables starting with NUXT_ENV_ in the build phase (e.g. NUXT_ENV_COOL_WORD=freezing nuxt build or SET NUXT_ENV_COOL_WORD=freezing & nuxt build for the Windows console, they'll be automatically injected into the process environment. Be aware that they'll potentially take precedence over defined variables in your nuxt.config.js with the same name.

process.env == {}

Note that Nuxt uses webpack's definePlugin to define the environmental variable. This means that the actual process or process.env from Node.js is neither available nor defined. Each of the env properties defined in nuxt.config.js is individually mapped to process.env.xxxx and converted during compilation.

Meaning, console.log(process.env) will output {} but console.log(process.env.your_var) will still output your value. When webpack compiles your code, it replaces all instances of process.env.your_var with the value you've set it to, e.g.: env.test = 'testing123'. If you use process.env.test in your code somewhere, it is actually translated to 'testing123'.

before