Handling Environment Variables in Nuxt 3: Security Considerations and Best Practices

TL;DR:

• Nuxt uses vitejs https://nuxt.com/docs/api/nuxt-config#vite
• Any environment variable with a name that dont start with VITE_ will never be exposed to your frontend code
• All environment variables including OS level will be accessed in your server side code, eg. in api routes files

Environment variables are a powerful way to store configuration values that can be easily adapted to different environments (development, staging, production). In Nuxt 3, you can effectively manage environment variables using the .env file and the runtimeConfig option.

Setting Up Environment Variables:

Create a file named .env at the root of your Nuxt 3 project directory.
Inside the .env file, define your environment variables in the following format:

VARIABLE_NAME=value

Replace VARIABLE_NAME with the actual name you want to use in your application.

💡Remember to add the .env file to your .gitignore file to prevent it from being committed to your version control system.

Using Environment Variables in runtimeConfig:

Navigate to your nuxt.config.ts file

Define your runtime configuration using the runtimeConfig option:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Make environment variables accessible here
    public: {
      API_BASE_URL: process.env.API_BASE_URL,
      // Add more environment variables as needed
    },
  },
});

Explanation:

The runtimeConfig option allows you to specify configuration values that will be available at runtime.
The public property within runtimeConfig makes the defined variables accessible throughout your application, including both the server and the browser.
You can access environment variables using process.env.VARIABLE_NAME within the runtimeConfig definition.

Accessing Environment Variables:

Once you've defined your environment variables in the .env file and configured them in runtimeConfig, you can access them in your Nuxt 3 application:

• In Vue Components:

Code snippet

<template>
  <p>API Base URL: {{ $config.public.API_BASE_URL }}</p>
</template>

• In Server-Side Code (e.g., server/api/hello.js):

export default defineEventHandler(async (event) => {
  const apiBaseUrl = process.env.API_BASE_URL;
  return `hello from ${apiBaseUrl}`;
});

Security Measures in Nuxt.js

While managing environment variables is essential for application configuration, it's equally important to ensure that sensitive information remains secure, especially when dealing with client-side code. To address this concern, Nuxt.js implement a crucial security measure: it will never expose environment variables to the frontend that don't start with VITE_.

Why VITE_ Prefix Matters

The VITE_ prefix serves as a safeguard against potential security vulnerabilities by restricting the exposure of sensitive information to the frontend. This means that only variables explicitly designated for frontend use, with the VITE_ prefix, will be accessible to client-side code.

Key Takeaway

By adhering to the VITE_ prefix convention, developers can ensure that only designated environment variables are exposed to the frontend, mitigating the risk of security breaches and safeguarding sensitive information.

Read more : https://vitejs.dev/guide/env-and-mode