Environment variables management in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of environment variables in a Vue project?

Environment variables store configuration values that can change between development, testing, and production without changing the code. They help keep sensitive data like API keys safe and make the app adaptable to different environments.

beginner

How do you name environment variable files in Vue to target different environments?

Vue uses files like .env for default, .env.development for development, and .env.production for production. Vue loads the right file based on the build mode.

intermediate

Why must Vue environment variables start with VITE_?

Vue uses Vite as its build tool, which only exposes environment variables starting with VITE_ to the client-side code. This prevents accidental exposure of sensitive data.

beginner

How do you access an environment variable named VITE_API_URL in a Vue component?

You access it using import.meta.env.VITE_API_URL inside your Vue component or JavaScript code.

intermediate

What is a good practice to keep environment variables secure in Vue projects?

Never commit sensitive environment variable files like .env.local to version control. Use .env files for non-sensitive defaults and keep secrets in protected places like CI/CD settings or server environments.

Which prefix must environment variables have to be accessible in Vue client code?

A VITE_

B APP_

C ENV_

D CLIENT_

Vue with Vite only exposes environment variables starting with VITE_ to client-side code.

Where do you store environment variables for production in a Vue project?

A .env.production

B .env.development

C .env.local

D .env.test

The .env.production file holds environment variables used when building for production.

How do you access the environment variable VITE_API_KEY in Vue code?

A window.env.VITE_API_KEY

B process.env.VITE_API_KEY

C import.meta.env.VITE_API_KEY

D env.VITE_API_KEY

Vite exposes environment variables via import.meta.env in Vue projects.

Why should you avoid committing .env.local to version control?

A It slows down the build process

B It is always empty

C It conflicts with .env.production

D It contains sensitive data specific to your machine

.env.local often contains secrets or machine-specific settings and should not be shared.

What happens if you define an environment variable without the VITE_ prefix in Vue?

A It will be ignored by Vite

B It will be accessible only on the server side

C It will cause a build error

D It will be accessible in client code

Variables without VITE_ are not exposed to client code but can be used in server-side code.

Explain how Vue manages environment variables for different environments and how you access them in your code.

Think about how you switch settings between development and production.

Describe best practices for keeping environment variables secure in a Vue project.

Consider what could happen if secrets get shared publicly.

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