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.