How to config ENV variables in Nuxt.js with Heroku and Netlify

Zain Ahmed
2 min readOct 4, 2021

Recently I was working on a project using Nuxt.JS framework for frontend development. so after a short time when decided to host the web app live I prefer Heroku/Netlify for free hosting since its easy to host the JavaScript app there and you can automate your deployment on it with respective GitHub/GitLab repo.

I was using some ENV variables for API base URL/payment getaway's keys etc. on local I define these ENV variables in .env file which is add to .gitignore file so the .env file not to add in repo for safety purpose. On heroku/ netlify you can define ENV variables which you define on local so the application can access them from build time and your code where all keys are using not to break.

once you define the variables your application use those variables same as using the locals.

Heroku
Netlify

but here I was facing some issues with getting those variables on live site even though I defined them on heroku/netlify.

So after so much research and got some luck I tried with that approach to define ENV variables with start of NUXT_ENV and I got success with that.

Heroku/Netlify

--

--

Zain Ahmed

Hi I am Zain Ahmed Software Engineer with passionate about try different technologies and try some cool staff, I create Blogs/Content on different platform.