# Using Nuxt and environment variables

**URL:** <https://answers.netlify.com/t/using-nuxt-and-environment-variables/24440>\
**Category:** Support\
**Tags:** netlify-newbie, deployment\
**Created:** [October 14, 2020, 7:36pm UTC](https://answers.netlify.com/t/using-nuxt-and-environment-variables/24440 "2020-10-14T19:36:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hendrix617](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hendrix617/32/36438_2.png) [@hendrix617](https://answers.netlify.com/u/hendrix617)\
**Post date:** [October 14, 2020, 7:36pm UTC](https://answers.netlify.com/t/using-nuxt-and-environment-variables/24440/1 "2020-10-14T19:36:53Z")

</div>

Hey everyone!

I’m using NUXT, firebase, and sendgrid for a small project I have. I have an API key from sendgrid that works locally when i pass the api key string as such:

const transporter = nodemailer.createTransport({  
host: ‘[smtp.sendgrid.net](http://smtp.sendgrid.net)’,  
port: 587,  
secure: false, // upgrade later with STARTTLS  
auth: {  
user: ‘apikey’,  
pass:  
‘MY API KEY NUMBER’,  
},  
})

this works perfectly locally  
I have created a .env file that is storing my api key and not commiting to GITHUB. When I deploy the site this way the email form does not work. This is my first time doing something like this and I just cannot figure out where to go from here.

I also added my API KEY to the netlify environment variables section unnder build and deploy and still does not work.

How do i call the api locally (hidden), push to github and netlify and have it grab the correct api key?

any advice would be awesome! thanks

---

<div class="post-metadata">

**Author:** ![fool](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/fool/32/37_2.png) [@fool](https://answers.netlify.com/u/fool)\
**Post date:** [October 19, 2020, 6:24pm UTC](https://answers.netlify.com/t/using-nuxt-and-environment-variables/24440/2 "2020-10-19T18:24:58Z")

</div>

Hiya @hendrix617 and sorry to be slow to get back to you! I think this is the advice you need:

> [@\[Support Guide\] Using environment variables on Netlify correctly](https://answers.netlify.com/t/support-guide-using-environment-variables-on-netlify-correctly/267):
>
> Last reviewed: August 2023 The preferred way to use environment variables in Netlify is to set them in our environment - be that in the Environment Variables settings UI (on the site’s “Build & Deploy settings” page), or [via netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration/). You’ll want to choose the right pattern to meet your needs. Setting variables in our UI may be considered a bit more secure, since only people with access to the Netlify admin UI for your site can see them, rather than “anyone who can clone your repo!”. Thes…

The TL;DR is you need to “do something” with that variable - setting it is great for usage during build; for usage at BROWSE time you’ll need to interpolate its values during build, since there is no concept of an “environment” at runtime - just static files that need to have any variables interpolated already.

If you need to hide your API token, that won’t be a good idea - I can see it in your page source. In that case you probably need a function like this one to “hide” the token when using it:

> **[GitHub - depadiernos/token-hider-inator: A token/key obscuring function for...](https://github.com/depadiernos/token-hider-inator)**
>
> A token/key obscuring function for API calls using Netlify functions. - GitHub - depadiernos/token-hider-inator: A token/key obscuring function for API calls using Netlify functions.