Environment variables management in Vue - Step-by-Step Execution

Concept Flow - Environment variables management

Define .env file

↓

Vue CLI or Vite loads env

↓

Variables prefixed with VUE_APP_ or VITE_

↓

Access via import.meta.env or process.env

↓

Use variables in components

↓

Build and run app with env variables

This flow shows how Vue reads environment variables from .env files, loads only those with correct prefixes, and makes them available in the app code.

Execution Sample

Vue

/* .env */
VITE_API_URL=https://api.example.com

// In Vue component
const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)

This code loads an environment variable from .env and logs it inside a Vue component.

Execution Table

Step	Action	Source	Variable Loaded	Value	Usage
1	Read .env file	.env file	VITE_API_URL	https://api.example.com	Loaded by Vite
2	Filter variables	All env vars	VITE_API_URL	https://api.example.com	Prefixed with VITE_ - included
3	Expose to app	import.meta.env	VITE_API_URL	https://api.example.com	Available in Vue code
4	Access in component	Vue component	apiUrl	https://api.example.com	Assigned from import.meta.env
5	Console log	Vue component	apiUrl	https://api.example.com	Output to console
6	End	-	-	-	No more steps

💡 All environment variables with VITE_ prefix are loaded and accessible in Vue app via import.meta.env

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
VITE_API_URL	undefined	https://api.example.com	https://api.example.com	https://api.example.com	https://api.example.com	https://api.example.com
apiUrl	undefined	undefined	undefined	undefined	https://api.example.com	https://api.example.com

Key Moments - 2 Insights

Why do environment variables need a prefix like VITE_ to be accessible in Vue?

Only variables with the VITE_ prefix are exposed to the client-side code to avoid leaking sensitive data. See execution_table step 2 where filtering happens.

How does Vue access environment variables inside components?

Vue uses import.meta.env to access variables at runtime, as shown in execution_table step 3 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of apiUrl after step 4?

A "https://api.example.com"

B "undefined"

C "VITE_API_URL"

D "null"

💡 Hint

Check the 'Variable Loaded' and 'Value' columns at step 4 in the execution_table.

At which step does Vue filter environment variables by prefix?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look for the step mentioning filtering variables in the execution_table.

If you add a variable without the VITE_ prefix in .env, what happens?

A It is accessible in import.meta.env

B It is filtered out and not accessible in Vue code

C It causes an error during build

D It overwrites existing variables

💡 Hint

Refer to the filtering step (step 2) in the execution_table and the key_moments about prefixes.

Concept Snapshot

Environment variables in Vue:
- Define in .env files with VITE_ prefix
- Loaded automatically by Vite
- Access via import.meta.env.VITE_VAR_NAME
- Only prefixed vars exposed to client
- Use for API URLs, keys, configs
- Keep sensitive data out of client env

Full Transcript

This visual execution shows how Vue manages environment variables. First, variables are defined in .env files with a VITE_ prefix. During build, Vite reads the .env file and filters variables to include only those with the VITE_ prefix. These variables become accessible in the Vue app code via import.meta.env. Inside components, you can assign these variables to constants and use them as needed, for example, logging the API URL. Variables without the prefix are ignored to protect sensitive data. This process ensures environment-specific settings are safely and easily used in Vue applications.

Practice

1. In Vue projects, why do environment variables usually start with VITE_?

easy

A. Because it encrypts the variables for security.

B. Because VITE_ is a required prefix for all JavaScript variables.

C. Because it makes variables global across all projects automatically.

D. Because Vue only exposes variables starting with VITE_ to the client code.

Solution

1. Step 1: Understand Vue environment variable rules

   Vue only exposes environment variables to client code if they start with VITE_ to avoid leaking sensitive data.

2. Step 2: Analyze the options

   Only Because Vue only exposes variables starting with VITE_ to the client code. correctly states this behavior. Other options are incorrect or unrelated.

3. Final Answer:

   Because Vue only exposes variables starting with VITE_ to the client code. -> Option D

4. Quick Check:

   Vue env vars need VITE_ prefix = A [OK]

Hint: Remember Vue only exposes vars starting with VITE_ [OK]

Common Mistakes:

• Thinking all env vars are exposed regardless of prefix
• Confusing prefix with encryption or global scope
• Assuming prefix is optional

2. Which of the following is the correct way to access an environment variable named VITE_API_URL inside a Vue component?

easy

A. process.env.VITE_API_URL

B. this.env.VITE_API_URL

C. import.meta.env.VITE_API_URL

D. window.env.VITE_API_URL

Solution

1. Step 1: Recall Vue 3 environment variable access syntax

   In Vue 3 with Vite, environment variables are accessed via import.meta.env.

2. Step 2: Match the correct syntax

   Only import.meta.env.VITE_API_URL uses import.meta.env.VITE_API_URL, which is correct. Others use outdated or incorrect patterns.

3. Final Answer:

   import.meta.env.VITE_API_URL -> Option C

4. Quick Check:

   Use import.meta.env to access env vars = D [OK]

Hint: Use import.meta.env to read env variables in Vue [OK]

Common Mistakes:

• Using process.env which is Node.js style, not Vue/Vite
• Trying to access env vars on window or this
• Forgetting the VITE_ prefix

3. Given this Vue code snippet:

console.log(import.meta.env.VITE_APP_NAME);

And the environment file .env contains:

VITE_APP_NAME=MyVueApp

What will be printed in the browser console?

medium

A. MyVueApp

B. undefined

C. import.meta.env.VITE_APP_NAME

D. Error: Variable not found

Solution

1. Step 1: Check environment variable definition

   The variable VITE_APP_NAME is defined in the .env file with value "MyVueApp".

2. Step 2: Understand how Vue reads env variables

   Vue replaces import.meta.env.VITE_APP_NAME with the value from the environment file at build time.

3. Final Answer:

   MyVueApp -> Option A

4. Quick Check:

   Env var value printed = A [OK]

Hint: Env vars print their defined values, not undefined [OK]

Common Mistakes:

• Expecting undefined if variable is defined correctly
• Confusing variable name with string output
• Assuming runtime error if variable missing

4. You wrote this code in a Vue component:

console.log(import.meta.env.API_KEY);

But the console shows undefined. What is the most likely reason?

medium

A. You must use process.env instead of import.meta.env.

B. The environment variable does not start with VITE_ prefix.

C. You forgot to import import.meta explicitly.

D. The variable name is case-insensitive and should be lowercase.

Solution

1. Step 1: Check environment variable naming rules

   Vue only exposes env variables starting with VITE_ to client code.

2. Step 2: Analyze the code and variable name

   The variable API_KEY lacks the VITE_ prefix, so it is not exposed and returns undefined.

3. Final Answer:

   The environment variable does not start with VITE_ prefix. -> Option B

4. Quick Check:

   Missing VITE_ prefix causes undefined = C [OK]

Hint: Env vars must start with VITE_ to be accessible [OK]

Common Mistakes:

• Trying to import import.meta explicitly
• Using process.env in Vue with Vite
• Assuming env vars are case-insensitive

5. You want to create a Vue app that uses different API URLs for development and production. You have these files:

.env.development
VITE_API_URL=https://dev.api.com

.env.production
VITE_API_URL=https://prod.api.com

How should you access the API URL in your Vue component to ensure the correct URL is used based on the environment?

hard

A. Use import.meta.env.VITE_API_URL which automatically picks the right file based on build mode.

B. Manually check process.env.NODE_ENV and set URL accordingly.

C. Hardcode the URL in the component and change it before building.

D. Use window.location.hostname to guess the environment and set URL.

Solution

1. Step 1: Understand Vue environment mode handling

   Vue with Vite loads environment variables from files matching the build mode automatically, e.g., .env.development or .env.production.

2. Step 2: Access env variable in code

   Using import.meta.env.VITE_API_URL accesses the correct URL depending on the mode without manual checks.

3. Final Answer:

   Use import.meta.env.VITE_API_URL which automatically picks the right file based on build mode. -> Option A

4. Quick Check:

   import.meta.env auto-selects env file by mode = B [OK]

Hint: Use import.meta.env to auto-select env vars by mode [OK]

Common Mistakes:

• Manually checking NODE_ENV instead of using import.meta.env
• Hardcoding URLs instead of using env files
• Guessing environment from window.location