How to create environment variables in Nuxt.js

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.

Resources

• Environment variables in Nuxt

Comments

[Alexander Lichter]

Hey! Unfortunately this article contains a common runtimeConfig mistake.

Your config does not have to contain the process.env variables:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      DATABASE_ID: '',
      COLLECTION_ID: '',
      PROJECT_ID: '',
      API_ENDPOINT: '',
    },
  },
});

But more importantly you should name your .env variables based on the structure of your nuxt config:

NUXT_PUBLIC_DATABASE_ID="[DATABASE_ID]"
NUXT_PUBLIC_COLLECTION_ID="[COLLECTION_ID]"
NUXT_PUBLIC_PROJECT_ID="[PROJECT_ID]"
NUXT_PUBLIC_API_ENDPOINT="[API_ENDPOINT]"

Be aware that the public part of your runtimeConfig is also accessibly on the client side and should never contain secrets :)

[oteri]

I will check it, as this feedback is valuable.

Thanks, @mannil