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:
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:
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
<p>API Base URL: {{ $config.public.API_BASE_URL }}</p>
</template>
In Server-Side Code (e.g., server/api/hello.js):
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
