• Type:

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.

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

nuxt.config.js

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 ().

1. 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 .

plugins/axios.js

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

Note that Nuxt uses webpack’s definePlugin to define the environmental variable. This means that the actual process or 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

after