Environment variables management in Vue - Deep Dive

Overview - Environment variables management

What is it?

Environment variables management in Vue means storing and using special values outside your code that tell your app how to behave in different places, like development or production. These values can include things like API keys, URLs, or feature flags. Instead of hardcoding these details, Vue lets you keep them in separate files that change depending on where your app runs. This helps keep your app flexible and secure.

Why it matters

Without environment variables, you would have to change your code every time you move your app from your computer to a live website or test server. This is slow, error-prone, and risky because sensitive info like passwords might get exposed. Environment variables let you switch settings easily and keep secrets safe, making your app more reliable and professional.

Where it fits

Before learning environment variables in Vue, you should understand basic Vue app setup and how to run Vue projects locally. After this, you can learn about deployment processes and advanced configuration techniques to make your apps production-ready.

Mental Model

Core Idea

Environment variables are like secret notes you give your app to tell it how to behave without changing its code.

Think of it like...

Imagine you have a recipe book (your app code) but the ingredients (like salt amount or oven temperature) change depending on the kitchen you are in. Instead of rewriting the recipe, you keep a sticky note with the right ingredient amounts for each kitchen. Environment variables are those sticky notes.

┌─────────────────────────────┐
│ Vue App Code (fixed recipe) │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│ Environment Variables Files  │
│ (.env.development, .env.production)│
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│ App Behavior & Config Output │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What are environment variables

Concept: Introduce the idea of environment variables as external settings for apps.

Environment variables are values stored outside your app's code that tell it how to behave. For example, an API URL or a secret key can be stored as an environment variable. This way, you don't hardcode sensitive or changing info inside your code.

Result

You understand that environment variables separate configuration from code.

Understanding that environment variables keep sensitive or changeable info outside code helps you write safer and more flexible apps.

2

Foundation

Vue's .env files and naming rules

Concept: Learn how Vue uses .env files and naming conventions for environment variables.

Vue uses files named like .env, .env.development, and .env.production to store environment variables. Variables must start with VUE_APP_ to be accessible in your Vue app. For example, VUE_APP_API_URL=https://api.example.com. Vue loads the right file based on the mode you run your app in.

Result

You can create .env files and define variables Vue will read.

Knowing the naming rules and file structure is key to making environment variables work in Vue.

3

Intermediate

Accessing variables inside Vue components

🤔Before reading on: do you think you can use environment variables directly as normal variables in Vue templates? Commit to your answer.

Concept: Learn how to use environment variables inside Vue code.

In Vue, you access environment variables via process.env.VUE_APP_YOUR_VARIABLE. For example, in a component script: const apiUrl = process.env.VUE_APP_API_URL. You cannot use them directly in templates; you must assign them to data or computed properties first.

Result

You can use environment variables to change app behavior dynamically.

Understanding how to access environment variables in code lets you customize your app without changing source files.

4

Intermediate

Switching variables by mode

🤔Before reading on: do you think Vue automatically picks the right .env file based on your run command? Commit to yes or no.

Concept: Learn how Vue chooses which .env file to use depending on the environment mode.

When you run npm run serve, Vue uses .env.development. When you run npm run build, it uses .env.production. You can also create custom modes like .env.staging. This lets you have different settings for development, testing, and production without changing code.

Result

Your app uses different environment variables automatically based on mode.

Knowing mode-based switching helps you manage multiple deployment environments cleanly.

5

Intermediate

Securing sensitive data with environment variables

Concept: Understand how environment variables help keep secrets safe and what their limits are.

Environment variables keep secrets like API keys out of your code repository. However, in Vue apps, these variables are bundled into the final JavaScript and visible in the browser. So, never put truly secret keys here. Use environment variables mainly for non-secret config or use backend servers for secrets.

Result

You know when environment variables protect secrets and when they don't.

Understanding the security limits prevents accidental exposure of sensitive data.

6

Advanced

Custom environment modes and variables

🤔Before reading on: do you think you can create your own environment modes beyond development and production? Commit to yes or no.

Concept: Learn how to define and use custom environment modes in Vue.

You can create files like .env.staging and run Vue with vue-cli-service build --mode staging. Vue will load .env and .env.staging, merging variables. This lets you test different setups like staging servers or feature flags without changing code.

Result

You can manage multiple custom environments easily.

Knowing how to create custom modes gives you powerful control over app configuration.

7

Expert

How Vue injects environment variables at build time

🤔Before reading on: do you think environment variables are read at runtime in the browser or replaced during build? Commit to your answer.

Concept: Understand that Vue replaces environment variable references with actual values during build, not at runtime.

Vue's build tool (webpack or Vite) uses a plugin to replace process.env.VUE_APP_* references with the actual string values from .env files during build. This means the final app code has the values baked in, not a dynamic lookup. This is why changing .env files requires rebuilding the app.

Result

You understand why environment variables are static in Vue apps and how to update them.

Knowing build-time injection explains why environment variables can't change after deployment and why rebuilds are needed.

Under the Hood

Vue uses build tools like webpack or Vite that scan your source code for references to process.env.VUE_APP_* variables. During the build process, a plugin replaces these references with the actual string values from your .env files. This replacement happens before the app runs in the browser, so the final JavaScript code contains the values directly. The .env files are loaded based on the mode (development, production, etc.) you specify when building or serving the app.

Why designed this way?

This design ensures environment variables are embedded in the app bundle for fast access without runtime overhead. It also fits the static nature of frontend apps that run in browsers without access to server environment variables. Alternatives like runtime environment lookups would require server support or extra requests, complicating deployment and slowing apps. Embedding variables at build time balances flexibility and performance.

┌───────────────┐
│ .env Files    │
│ (VUE_APP_*)   │
└──────┬────────┘
       │
       ▼
┌─────────────────────────────┐
│ Vue Build Tool (webpack/Vite)│
│ - Reads .env files           │
│ - Replaces process.env.*     │
│   with actual values         │
└──────┬──────────────────────┘
       │
       ▼
┌─────────────────────────────┐
│ Final JavaScript Bundle      │
│ - Contains real values       │
│ - Runs in browser            │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: do you think environment variables in Vue apps are truly secret and hidden from users? Commit to yes or no.

Common Belief: Environment variables keep all secrets safe from users because they are not in the code.

Reality: In Vue apps, environment variables are embedded in the final JavaScript bundle and can be seen by anyone using browser developer tools.

Why it matters: Believing they are secret can lead to exposing sensitive keys publicly, causing security breaches.

Quick: do you think you can change environment variables in Vue apps without rebuilding? Commit to yes or no.

Common Belief: You can update environment variables anytime and the app will pick them up immediately.

Reality: Environment variables are replaced at build time, so changing .env files requires rebuilding the app to update values.

Why it matters: Not rebuilding after changes causes the app to use old values, leading to bugs or misconfigurations.

Quick: do you think any variable in .env files is automatically available in Vue code? Commit to yes or no.

Common Belief: All variables in .env files can be accessed in Vue components.

Reality: Only variables starting with VUE_APP_ are exposed to Vue code; others are ignored for security and clarity.

Why it matters: Using variables without the prefix causes confusion and bugs because they won't be accessible.

Quick: do you think environment variables can be used directly in Vue templates? Commit to yes or no.

Common Belief: You can write {{ process.env.VUE_APP_API_URL }} directly in templates.

Reality: process.env is not reactive and not available in templates; you must assign variables to data or computed properties first.

Why it matters: Trying to use them directly causes runtime errors or empty values in the UI.

Expert Zone

1

Vue merges .env, .env.local, and mode-specific files (.env.production) with priority rules, allowing flexible overrides.

2

Variables are replaced as string literals, so non-string values must be handled carefully to avoid bugs.

3

Using environment variables for feature flags requires rebuilding the app, so dynamic toggling needs other solutions like remote config.

When NOT to use

Do not use Vue environment variables for truly secret data like private API keys or passwords because they are exposed in the browser. Instead, store secrets on backend servers or use secure vault services. Also, avoid relying on environment variables for runtime configuration that changes frequently; use server APIs or remote config instead.

Production Patterns

In production, teams use multiple .env files for staging, testing, and production with CI/CD pipelines that inject correct variables during build. They keep sensitive keys only on backend servers and use environment variables mainly for URLs, feature flags, and non-secret config. They also document variables clearly and use type checking tools to avoid mistakes.

Connections

12-Factor App Configuration

Builds-on

Understanding environment variables in Vue helps implement the 12-Factor App principle of separating config from code, making apps portable and scalable.

Continuous Integration/Continuous Deployment (CI/CD)

Supports

Knowing how environment variables work enables smooth CI/CD pipelines that inject correct configs during automated builds and deployments.

Operating System Environment Variables

Similar pattern

Vue environment variables mimic OS environment variables concept, showing how apps can adapt behavior based on external settings.

Common Pitfalls

#1 Exposing sensitive API keys in Vue environment variables.

Wrong approach:

VUE_APP_SECRET_KEY=supersecretkey
// Using this key in frontend code directly

Correct approach:

// Do not store secret keys in Vue env variables
// Instead, keep secrets on backend and call backend APIs securely

Root cause:

Misunderstanding that Vue env variables are hidden from users when they are actually bundled into frontend code.

#2 Trying to access environment variables without VUE_APP_ prefix.

Wrong approach:

const apiUrl = process.env.API_URL; // undefined in Vue

Correct approach:

const apiUrl = process.env.VUE_APP_API_URL; // correct access

Root cause:

Not knowing Vue only exposes variables starting with VUE_APP_ to frontend code.

#3 Changing .env files but not rebuilding the app.

Wrong approach:

// Update .env.production but run no build
npm run serve
// App still uses old values

Correct approach:

npm run build
// Deploy new build with updated env variables

Root cause:

Not realizing environment variables are replaced at build time, so changes require rebuilding.

Key Takeaways

Environment variables in Vue let you separate configuration from code for flexibility and security.

Only variables prefixed with VUE_APP_ in .env files are accessible in Vue app code.

Vue replaces environment variable references with actual values during build, so changes require rebuilding.

Environment variables in Vue are visible in the browser, so never store sensitive secrets there.

Using mode-specific .env files lets you manage different settings for development, testing, and production easily.