As developers working on static code or programs, you want to be able to store credentials or app secrets that won't be available with the rest of the code in your application. It is always advisable when using environment variables, and it is necessary to always have security and safety at the back of your mind.
PS: You do not want these secrets to be leaked out on GitHub and used by someone else, like API keys, to gain access to your account.
In this tutorial, you will learn how to store your keys in a file named .env
and also prevent this file from being visible in your project in a particular file called .gitignore
.
What are environment variables?
Environment variables are variables or constants available to programs or applications during runtime development.
In hosting providers platforms like Netlify or Vercel, there is always a provision to include these environment variables during the app's deployment to production.
Prerequisites
For this section, you do not need specific knowledge to complete this tutorial; you only need to know how to install the Nuxt boilerplate.
Creating a Nuxt app
Before adding the environment variables in the codebase, you need to scaffold a new Nuxt application using the command:
npx nuxi init todos
Note: The name of this project, called todos could be any name you choose to use:
Next, follow the on-screen instructions in the command line interface (CLI) using the provided command, npm install.
This command is responsible for installing the required dependencies for this app.
Navigate to the project directory, todos with the command:
cd todos
Open the directory in your text editor of choice.
Adding environment variables
In the root of the directory, create the file, .env
and include the following code:
NUXT_DATABASE_ID="[DATABASE_ID]"
NUXT_COLLECTION_ID="[COLLECTION_ID]"
NUXT_PROJECT_ID="[PROJECT_ID]"
NUXT_API_ENDPOINT="[API_ENDPOINT]"
Replace the values with the actual data info within the quotation mark.
Preventing access to environment variables
With all the addition of the secret keys to the .env
file, it is necessary that before deployment of the code to GitHub, you need to prevent access to this file publicly.
Create another file in the directory's root called .gitgnore
and add the .env
file. The aim is to specify the untracked files that Git should ignore.
An example of a typical .gitignore
file should look something like this:
.env
node_modules
dist
.nuxt
.nuxt-*
.output
.gen
*.log
Configure the environment variables
In the root of the directory in the nuxt.config.ts
file, copy-paste this code:
export default defineNuxtConfig({
runtimeConfig: {
public: {
DATABASE_ID: process.env.NUXT_DATABASE_ID,
COLLECTION_ID: process.env.NUXT_COLLECTION_ID,
PROJECT_ID: process.env.NUXT_PROJECT_ID,
API_ENDPOINT: process.env.NUXT_API_ENDPOINT,
},
},
});
To use these environment variables in the rest of your app, expose them using the runtimeConfig
option.
According to the Nuxt documentation, adding DATABASE_ID
, for example to the runtimeConfig.public
, Nuxt adds it to each page payload. We can universally access DATABASE_ID
in both the server and browser.
const runtimeConfig = useRuntimeConfig()
console.log(runtimeConfig.public.DATABASE_ID)
Conclusion
This tutorial showed you how to create environment variables in the Nuxt.js app and use the runtime config option to access the secrets from any part of the app directly.
Finally, always carry out this exercise whenever you have app secrets and credentials to avoid exposing them to a public repo in GitHub, BitBucket, etc.
Top comments (2)
Hey! Unfortunately this article contains a common runtimeConfig mistake.
Your config does not have to contain the
process.env
variables:But more importantly you should name your .env variables based on the structure of your nuxt config:
Be aware that the
public
part of your runtimeConfig is also accessibly on the client side and should never contain secrets :)I will check it, as this feedback is valuable.
Thanks, @mannil