How to create environment variables in Nuxt.js
Tags: vue, javascript, tutorial, nuxt
Published: 2023-05-02 09:10:29

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:

```javascript
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](https://nuxt.com/docs/guide/going-further/runtime-config#exposing-runtime-config), 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.


## Resources
- [Environment variables in Nuxt](https://nuxt.com/docs/guide/going-further/runtime-config)