Environment variables management in Vue

Introduction

Environment variables help you keep important settings separate from your code. This makes your app easier to change and safer.

You want to store API keys without putting them directly in your code.

You need different settings for development and production versions of your app.

You want to change the app's behavior without changing the code.

You want to keep sensitive information like passwords hidden from public view.

Syntax

Vue

# .env file example
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vue App

In Vue, environment variables must start with VITE_ to be accessible in your code.

Use a .env file in your project root to define variables.

Examples

This file is used only when running the app in development mode.

Vue

# .env.development
VITE_API_URL=https://dev.api.example.com
VITE_APP_TITLE=My Vue App (Dev)

This file is used when building the app for production.

Vue

# .env.production
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vue App

Access environment variables in your Vue components or scripts using import.meta.env.

Vue

console.log(import.meta.env.VITE_API_URL)
console.log(import.meta.env.VITE_APP_TITLE)

Sample Program

This Vue component shows how to read environment variables and display them in the page.

Vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>API URL: {{ apiUrl }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = ref(import.meta.env.VITE_APP_TITLE)
const apiUrl = ref(import.meta.env.VITE_API_URL)
</script>

Important Notes

Remember to restart your development server after changing environment variables.

Do not commit sensitive keys to public repositories.

Use different .env files for different environments to keep settings organized.

Summary

Environment variables keep important settings outside your code.

Vue requires variables to start with VITE_ to use them.

Access variables in code with import.meta.env.

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