Using .env files with Nuxt
Playing
01. Using .env files with Nuxt

Episodes

0%
Your progress
  • Total: 5m
  • Played: 0m
  • Remaining: 5m
Join or sign in to track your progress

Transcript

00:00
So in this snippet, I'm going to show you how to use environment variables with Nuxt. So if you come from a perhaps backend framework that uses environment variables, you'll know how useful these are when you're working on a local environment versus a production or a staging environment and we can pretty much achieve the same effect using something like
00:22
Nuxt or view on the client side. And to do this, we're going to use the .env package which as you can see is incredibly popular. So the first thing that we're going to do is just go ahead and install this.
00:34
So let's come out of our Nuxt development and go ahead and save this to our dependencies. And just while we're doing that, let's head over to our nuxt.config.js. Now this is a freshly installed Nuxt project. And what we're going to be doing in here is setting the environment variables or rather
00:53
merging in the environment variables within Nuxt once this is finished. So that looks like it's done. Let's rerun npm run dev and see what we can do with this. Now the first thing to do is go ahead and pull in that env package.
01:06
So let's require this in at the top of our configuration file, so .env. And then what we want to do is extract out of this config. Now let's just do a log on env and just see what we get from this first of all. What you might need to do is when you go ahead and update this, just rerun npm run
01:23
dev. And you can see here that the first thing that we get is no such file or directory. It's trying to look for a .env file inside the root of our project. So that's the first step.
01:34
Let's go ahead and create a .env file inside of that root. We'll keep it empty for now. But what we should now see, and again I'm just going to rerun this just to kind of refresh that, we get an object in here with an array or an object rather of all of our environment
01:50
variables. So let's just say stripe secret just to test this out. So I'm going to set that with a value of ABC. And again, if we just come out of here and rerun this, you can see that we get the environment
02:03
variables inside of here ready to go. Now the question is how do we use these inside of our components? These are all being loaded in now but we want a nice way to, for example, if we come over to our pages here, we want to use this inside of here.
02:20
So how are we going to do that? Well a nice easy way is to specify inside of our config that we want to use the parsed .env object inside of here as part of our Nuxt configuration. What this is now going to mean is Nuxt will merge in along with its other environment
02:40
variables all of this information. So what we can now do is inside of our components, and this is what I tend to do, is create out either some data in here and go ahead and return this. So for example, inside of a stripe component where I am taking in card information, what
02:57
I can do is define out stripe secret and reference process.env.stripesecret like so. And I'll show you a slightly easier way to do this in just a minute by importing a config file but the process pretty much remains the same. So what we can now do is inside of our component, if you need to use it in here, it's very rare
03:17
that you'll need to use an environment variable inside of an actual template, but of course now that you've got this in here, you can directly use this value perhaps when you mount the component. So you can go ahead and log that out as well, and I'll just show you that as well.
03:30
So let's pull that into there so we can see that in our component also. And let's go ahead and just re-run this just for the sake of it. Come over here and give that a refresh and sure enough you just about saw that we had ABC written in there.
03:45
And if we open up our console, sure enough we get that value in there as well. So that's pretty much it. What we can now do is add any environment variables to our EMV file and we can have a version of this for local development, staging, production, and of course this will make it
04:00
a lot easier rather than switching everything out. Now it's a little bit cumbersome to pull these in using process.emv. Some people don't like this. I personally use this.
04:12
But one thing that you can do is create a kind of global config file. So for example, you could create a config.js file in the root of your project and you could go ahead and export an object from here using all of that information. So for example, you might have stripe and you might have secret and then you'll reference
04:30
process.emv stripe secret. And then what of course you can do is just import this. And of course you can break this up into separate files if you want. You know, it's entirely up to you how you handle this.
04:43
What that means that we can do is inside of here now, we can go ahead and import our config like so from – we can just use the at alias to grab the root. And then inside of mounted, for example, we could say log out config stripe and then what do we call that?
05:04
Secret. So now – and again, I'm just going to cancel this off and rerun it just for the sake of clarity. Give that a refresh once it's loaded.
05:13
And there we go. You can see that value. And the reason that we get this error here is because of course we're trying to reference something that doesn't exist within that component.
05:21
But either way, that is how we go ahead and hook up an EMV file inside of NUX to allow us to use this between different environments, keep keys out of our code as well just to make things a little bit easier for ourselves, and just generally create a more harmonious development environment between different servers.

Episode summary

In this episode, we dive into how to use .env files with Nuxt to manage environment variables for different environments, like local development, staging, and production. You'll see why these variables are so useful and learn how similar they can be to those in backend frameworks.

We start by installing the popular dotenv package and integrating it into a fresh Nuxt project. You'll see how to set up your .env file in the root of your project and verify that Nuxt can correctly load your environment variables—like a Stripe secret key.

Next, we cover how to access these variables inside your components (using process.env), and even discuss a more organized approach by creating a config.js file to centralize all your secrets and settings. This makes your code cleaner and handling different configurations a breeze.

Finally, we touch on best practices—like keeping secrets out of your codebase—and explain how using .env files makes it easier to switch between different environments. By the end, you'll have a solid understanding of managing environment variables in your Nuxt apps, making your development workflow smoother and more professional.

Episode discussion

No comments, yet. Be the first!