I found this informative video to be quite helpful and informative, providing some up-to-date information that I was previously unaware of. I plan on updating my answer with the correct information soon.

If you are using Nuxt version 2.13 or higher, there is no need for using @nuxtjs/dotenv or similar packages as it is already integrated into the framework.

To utilize variables, you must have an .env file at the root of your project which should be excluded from git. You can define keys in this file such as

PUBLIC_VARIABLE="https://my-cool-website.com"
PRIVATE_TOKEN="1234qwer"

In your nuxt.config.js, you need to assign these keys to either the publicRuntimeConfig or privateRuntimeConfig objects based on your requirements:

export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.PUBLIC_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateToken: process.env.PRIVATE_TOKEN
  }
}

Note: The publicRuntimeConfig can be used anywhere, while the privateRuntimeConfig is limited to SSR (Server-Side Rendering) to keep sensitive data secure.

A common usage of privateRuntimeConfig is in methods like nuxtServerInit or during the build process to fetch data from headless CMS APIs.

For more details, refer to this blog post: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

• You can directly access these variables in any .vue file by using

this.$config.myPublicVariable

• In Nuxt's /plugins directory, you can access them like this

export default ({ $axios, $config: { myPublicVariable } }) => {
  $axios.defaults.baseURL = myPublicVariable
}

• If you need to use a variable in a Nuxt module or in your nuxt.config.js file, you can reference it directly by

process.env.PRIVATE_TOKEN

Sometimes, the syntax might vary, so check your specific Nuxt module documentation for guidance.

// Example for @nuxtjs/gtm
publicRuntimeConfig: {
  gtm: {
    id: process.env.GOOGLE_TAG_MANAGER_ID
  }
},

If you are using target: server (default value), after running yarn build and yarn start, you can change environment variables without needing a rebuild. This is why it's called RuntimeConfig!

Nuxt3 update

According to the documentation, in Nuxt3 you can implement the following:

nuxt.config.js

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      secret: process.env.SECRET,
    }
  }
}

In any component

<script setup lang="ts">
  const config = useRuntimeConfig()
  config.secret
</script>

In a composable like /composables/test.js as shown below

export default () => {
  const config = useRuntimeConfig()
  console.log(config.secret)
}

Refer to the official documentation for more details on this topic.

You have the option to utilize the env feature in Nuxt nuxt.config.js:

export default {
  // Environment variables
  env: {
    myVariable: process.env.NUXT_ENV_MY_VAR
  },
  ...
}

Subsequently, within your plugin:

const myVar = process.env.myVariable

It's quite peculiar that accessing process.env in Nuxt 3 is not possible.

In Nuxt 3, the suggestion is to utilize runtime config, but this approach isn't always practical as it requires the Nuxt application context.

In cases where we have a basic library and prefer not to wrap it in plugins or composable functions, declaring global variables through vite/webpack seems to be the optimal solution:

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    define: {
      MY_API_URL: JSON.stringify(process.env.MY_API_URL)
    }
  }
})

This allows us to use the variable in any file without unnecessary complications:

// some-file.ts
console.log('global var:', MY_API_URL) // will be replaced by vite/webpack with actual value

If you wish to incorporate environment variables as before, specify the fully qualified name:

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    define: {
      // remember to use JSON.stringify to add quotes
      'process.env.APP_URL': JSON.stringify(process.env.APP_URL)
      // for example
      'process.env.APP_URL': '"https://myawesomesite.com"'
    }
  }
})

You can then access these variables in your code:

console.log(process.env.APP_URL)

If you inspect the browser sources, you'll notice:

console.log("https://myawesomesite.com")

Essentially, any variable defined in the vite.define section serves as a placeholder for substitution during compile time.

In the official documentation for v3 here, there is a detailed explanation.

To set up runtimeConfig in your nuxt.config.[ts,js] file, you can define it as follows:

export default defineNuxtConfig({
  runtimeConfig: {
    recaptchaSiteKey: 'default value' // This key is considered "private" and only accessible server-side
  }
}

You can initialize runtimeConfig using environment variables, but they are statically written after the build process. To dynamically override the value at runtime, use this env var:

NUXT_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC

If you want to access the configuration on the client-side, use the public property instead:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      recaptchaSiteKey: 'default value' // This will also be available on the client-side
    }
  }
}

Take note of the PUBLIC part in the following env var:

NUXT_PUBLIC_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC

Here is a straightforward method. I will present you with an example using axios/nuxt.

1. Firstly, define your variable in the .env file:

   baseUrl=http://localhost:1337

2. Next, add the variable to the nuxt.config.js within an env-object (and utilize it in the axios configuration):

   export default {env: {baseUrl: process.env.baseUrl},axios: {baseURL: process.env.baseUrl},}

3. You can now use the environment variable in any file like this:

   console.log(process.env.baseUrl)

Note: Keep in mind that while console.log(process.env) will display {}, console.log(process.env.baseUrl) will still reveal your specified value!

To start with Nuxt 3, begin by creating a new file called .env.

# .env
HELLO="World"

Next, place your HELLO environment variable within the runtimeConfig.public section of your nuxt.config.ts file.

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      HELLO: process.env.HELLO
    }
  },
  devtools: { enabled: true }
})

After setting up the configuration, you can access the value in your .vue files using the useRuntimeConfig() method.

<!-- In your [app/componentName].vue -->

<template>
  Hello {{useRuntimeConfig().public.HELLO}}.
</template>

<!-- Or -->

<template>
  Hello {{helloValue}}.
</template>

<script>
const config = useRuntimeConfig();
const helloValue = config.public.HELLO;
</script>

In the nuxt3 rc11 release, make sure to include the following configuration in the nuxt.conf.ts file:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      locale: {
        defaultLocale: process.env.NUXT_I18N_LOCALE,
        fallbackLocale: process.env.NUXT_I18N_FALLBACK_LOCALE,
      }
    }
  },
...

Additionally, update the .env file with the necessary variables:

NUXT_I18N_LOCALE=tr
NUXT_I18N_FALLBACK_LOCALE=en

It is crucial to include 'public:' in the configuration to avoid any undefined errors.

It seems like I might be the only one experiencing this issue, but the config.myVar does not appear to exist anymore. Specifically for a public (client) case. I can confirm this as when I console.log the config, console.log({ config }) displays an empty result https://i.sstatic.net/ZVQmC.png

However, it seems to work fine when accessed through config.public.myVar.

To provide a full explanation, here is my current setup:

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      recaptchaSiteKey: process.env.RECAPTCHA_SITE_KEY,
    },
  },
})

.env (located in root folder)

RECAPTCHA_SITE_KEY=123

composable/component

import { VueReCaptcha } from 'vue-recaptcha-v3'
import { RuntimeConfig } from 'nuxt/schema'
import { useNuxtApp } from '#app'

const config: RuntimeConfig = useRuntimeConfig()

const { vueApp } = useNuxtApp()
vueApp.use(VueReCaptcha, {
  siteKey: config.public.recaptchaSiteKey,
  loaderOptions: {
    autoHideBadge: true,
    renderParameters: {
      hl: 'en',
    },
  },
})