How to get Nuxt.js environment variables defined in `env` object?

Question

I have an .env file like so:

WP_API_PREFIX=somevalue
WP_ROOT=somevalue

Then in my nuxt config like so:

require('dotenv').config();

export default {
    mode: 'universal',
    env: {
        WP_ROOT: process.env.WP_ROOT,
        WP_REST_API_ENDPOINT: `${process.env.WP_ROOT}${process.env.WP_API_PREFIX}`
    },

Then down in my config file, I'd like to reference the WP_REST_API_ENDPOINT object, but I don't know how.

I have tried with:

process.env.WP_REST_API_ENDPOINT

But that is undefined.

How can I use the env I have set in the env object in nuxt.config.js ?

Answer 1

In each page or layout, you may have asyncData:

export default {
  asyncData({ env }) {
    return { env }
  }
}