Environment variables management in Vue - Mini Project: Build & Apply

Environment variables management

📖 Scenario: You are building a Vue app that needs to show different messages depending on the environment it runs in, like development or production.

🎯 Goal: Create a Vue 3 app that reads an environment variable and displays it on the page.

📋 What You'll Learn

Create a Vue 3 app with App.vue component

Use environment variables with the import.meta.env syntax

Display the environment variable value in the template

Use a config variable to hold the environment variable value

💡 Why This Matters

🌍 Real World

Many Vue apps need to behave differently in development, testing, and production. Environment variables help manage these differences safely.

💼 Career

Understanding environment variables is essential for frontend developers to configure apps without hardcoding sensitive or environment-specific data.

1

Create the Vue app skeleton

Create a Vue 3 single file component called App.vue with a <template> section containing a <div> with the text Environment: . Also add an empty <script setup> section.

Vue

  Environment: 



// Your code here

Hint

Start by writing the basic Vue component structure with template and script setup tags.

2

Add a config variable for the environment

Inside the <script setup> section, create a constant called envMessage and set it to import.meta.env.VITE_APP_ENV.

Vue

  Environment: 



// Create a constant envMessage for the environment variable
// Your code here

Hint

Use const envMessage = import.meta.env.VITE_APP_ENV to read the environment variable.

3

Display the environment variable in the template

Modify the <div> inside the <template> to show the text Environment: followed by the value of envMessage using Vue's mustache syntax.

Vue

  Environment: {{ envMessage }}



const envMessage = import.meta.env.VITE_APP_ENV
// Your code here

Hint

Use {{ envMessage }} inside the div to show the variable.

4

Add a fallback for missing environment variable

Update the envMessage constant to use the value of import.meta.env.VITE_APP_ENV or fallback to the string 'unknown' if it is not set, using the logical OR operator.

Vue

  Environment: {{ envMessage }}



// Update envMessage to fallback to 'unknown' if undefined
const envMessage = import.meta.env.VITE_APP_ENV || 'unknown'

Hint

Use const envMessage = import.meta.env.VITE_APP_ENV || 'unknown' to provide a fallback.

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