How to use .env variables in Nuxt 2 or 3?
Solution 1
If your Nuxt version is 2.13 or above, you don't need to use @nuxtjs/dotenv
or anything alike because it is already backed into the framework.
To use some variables, you need to have an .env
file at the root of your project. This one should be ignored by git. You can then input some keys there like
PUBLIC_VARIABLE="https://my-cool-website.com"
PRIVATE_TOKEN="1234qwer"
In your nuxt.config.js
, you have to input those into 2 objects, depending of your use case, either publicRuntimeConfig
or privateRuntimeConfig
:
export default {
publicRuntimeConfig: {
myPublicVariable: process.env.PUBLIC_VARIABLE,
},
privateRuntimeConfig: {
myPrivateToken: process.env.PRIVATE_TOKEN
}
}
Differences: publicRuntimeConfig
can basically be used anywhere, while privateRuntimeConfig
can only be used during SSR (a key can only stay private if not shipped to the browser).
A popular use case for the privateRuntimeConfig
is to use it for nuxtServerInit
or during the build process (either yarn build
or yarn generate
) to populate the app with headless CMS' API calls.
More info can be found on this blog post: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/
- Then, you will be able to access it into any
.vue
file directly with
this.$config.myPublicVariable
- You access it into Nuxt's
/plugins
too, with this syntax
export default ({ $axios, $config: { myPublicVariable } }) => {
$axios.defaults.baseURL = myPublicVariable
}
- If you need this variable for a Nuxt module or in any key in your
nuxt.config.js
file, write it directly with
process.env.PRIVATE_TOKEN
Sometimes, the syntax may differ a bit, in this case refer to your Nuxt module documentation.
// for @nuxtjs/gtm
publicRuntimeConfig: {
gtm: {
id: process.env.GOOGLE_TAG_MANAGER_ID
}
},
PS: if you do use target: server
(default value), you can yarn build
and yarn start
to deploy your app to production. Then, change any environment variables that you'd like and yarn start
again. There will be no need for a rebuild. Hence the name RuntimeConfig!
Nuxt3 update
As mentioned here, you can use the following for Nuxt3
nuxt.config.js
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
publicRuntimeConfig: {
secret: process.env.SECRET,
}
}
In any component
<script setup lang="ts">
const config = useRuntimeConfig()
config.secret
</script>
Solution 2
It's very easy. Providing you an example with axios/nuxt
-
Define your variable in the
.env
file:baseUrl=http://localhost:1337
-
Add the variable in the nuxt.config.js in an env-object (and use it in the axios config):
export default {env: {baseUrl: process.env.baseUrl},axios: {baseURL: process.env.baseUrl},}
-
Use the env variable in any file like so:
console.log(process.env.baseUrl)
Note that console.log(process.env) will output {} but console.log(process.env.baseUrl) will still output your value!
Denis Stephanov
Updated on June 04, 2022Comments
-
Denis Stephanov almost 2 years
I have .env file in the project root, and in my nuxt config I am using variables to configure ReCaptcha like this:
import dotenv from 'dotenv' dotenv.config() export default { modules: [ ['@nuxtjs/recaptcha', { siteKey: process.env.RECAPTCHA_SITE_KEY, version: 3, size: 'compact' }], ] }
and in .env like this:
RECAPTCHA_SITE_KEY=6L....
but the application always failed with console log error:
ReCaptcha error: No key provided
When I hard-code ReCaptcha key directly like that:
siteKey: 6L....
app start working, so I guess the problem is with reading .env props in nuxt.configdo you have any idea how to fix it?
EDIT: I tried update my nuxt.config by @kissu recommendation and by example which I found here: https://www.npmjs.com/package/@nuxtjs/recaptcha
so there is new nuxt.config which also not working:
export default { modules: [ '@nuxtjs/recaptcha', ], publicRuntimeConfig: { recaptcha: { siteKey: process.env.RECAPTCHA_SITE_KEY, version: 3, size: 'compact' } } }
-
Boussadjra Brahim almost 3 yearswhat's the nuxt version?
-
Denis Stephanov almost 3 years@BoussadjraBrahim 2.14
-
Boussadjra Brahim almost 3 yearsin this version you don't need
dotenv
module -
Denis Stephanov almost 3 years@BoussadjraBrahim I tried remove it but stilll didn't work
-
Kunukn almost 3 yearsHave you tried using this instead?
process.env.NUXT_ENV_RECAPTCHA_SITE_KEY
nuxtjs.org/docs/2.x/configuration-glossary/… -
kissu almost 3 yearsSo, did you solved your issue?
-
Denis Stephanov almost 3 years@kissu unfortunately no :/
-
-
Denis Stephanov almost 3 yearsThank you for answer, I tried edit by your recommendation and I still have same error. I also update my question.
-
kissu almost 3 yearsDo you have a populated
.env
in your project? -
kissu almost 3 yearsDo you have a Github repo? Do you have a valid key in
.env
, no typo? How do you try this? -
Denis Stephanov almost 3 yearsYes I checked site key and secret many times, there are correct, because when I write it in nuxt.config directly instead of using env variable everything works fine, so problem must be with reading env in nuxt config
-
kissu almost 3 yearsShow us some screenshots I guess.
-
Denis Stephanov almost 3 yearswhat screenshot you mean?
-
kissu almost 3 yearsYour setup is fine from what you tell. So, I don't know how but try to show us that this is 100% accurate because I'm sure that it works with the setup that I gave.
-
Denis Stephanov almost 3 yearsI tried this solution, but stull I got same error :/
-
kissu almost 3 yearsPlease provide more debugging info or a minimal reproducible example.
-
kissu over 2 yearsYou should not use
process.env.baseUrl
butmyPublicVariable
as explained in my answer. -
PirateApp over 2 yearswhat if your env file is not at the root, in my case i have 4 env files .env.dev env.test .env.prod etc and want to load the right one depending on my build
-
kissu over 2 years@PirateApp this is how you could achieve this: stackoverflow.com/a/68338032/8816585
-
Bagaskara over 2 yearsthe problem is, when you change env at the runtime, then the config which loaded in
nuxt.config.js
by usingprocess.env.xxx
will not be changed. because it has been packed at the build time.