Environment variables management in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Vue handle environment variables in templates?

Given a Vue 3 component that uses import.meta.env.VITE_API_URL inside its template, what will be rendered if VITE_API_URL is set to https://api.example.com?

Vue

<template>
  <div>{{ import.meta.env.VITE_API_URL }}</div>
</template>
<script setup>
// no script needed
</script>

A The string 'https://api.example.com' will be displayed inside the div.

B An error occurs because <code>import.meta.env</code> cannot be accessed in templates.

C The literal text 'import.meta.env.VITE_API_URL' will be shown.

D Nothing will be displayed because environment variables are not reactive.

💡 Hint

Remember that import.meta.env is replaced at build time and can be used in templates.

Vue replaces import.meta.env.VITE_API_URL with the actual environment variable value at build time, so the string is rendered directly.

📝 Syntax

intermediate

Correct syntax to access environment variables in Vue script setup

Which of the following is the correct way to access the environment variable VITE_APP_TITLE inside a Vue 3 <script setup> block?

Vue

<script setup>
// Access environment variable here
</script>

A const title = env.VITE_APP_TITLE;

B const title = process.env.VITE_APP_TITLE;

C const title = import.meta.env.VITE_APP_TITLE;

D const title = window.env.VITE_APP_TITLE;

💡 Hint

Vue 3 uses Vite which exposes env variables via import.meta.env.

In Vue 3 with Vite, environment variables are accessed using import.meta.env. The other options are invalid or undefined.

🔧 Debug

advanced

Why does the environment variable not update after changing .env file?

You changed the value of VITE_API_KEY in your .env file but your Vue app still shows the old value. What is the most likely reason?

A You must import the .env file manually in your component.

B The variable name must start with VUE_ instead of VITE_.

C Environment variables cannot be changed once the app is running.

D You need to restart the development server to reload environment variables.

💡 Hint

Think about how build tools load environment variables.

Vite loads environment variables at server start. Changes in .env require restarting the dev server to take effect.

🧠 Conceptual

advanced

Security considerations for Vue environment variables

Which statement about environment variables in Vue apps built with Vite is true?

A Environment variables are only accessible on the server and never bundled in the client code.

B All environment variables prefixed with VITE_ are exposed to client-side code and visible in the browser.

C Variables without VITE_ prefix are also exposed to the client.

D Environment variables are encrypted automatically and safe from client access.

💡 Hint

Consider what happens to variables during build time and client bundling.

Vite exposes all variables starting with VITE_ to client code. They are bundled and visible in browser devtools.

❓ state_output

expert

Effect of environment variable change on reactive state

Consider this Vue 3 component snippet:

<script setup>
import { ref } from 'vue'
const apiUrl = ref(import.meta.env.VITE_API_URL)
</script>

<template>
  <div>API URL: {{ apiUrl }}</div>
</template>

If you change VITE_API_URL in the .env file and restart the dev server, what will happen to the displayed apiUrl value when the app reloads?

A The displayed API URL updates to the new environment variable value after reload.

B The displayed API URL remains the old value because <code>apiUrl</code> is a ref and does not update automatically.

C The app crashes because environment variables cannot be assigned to refs.

D The displayed API URL is empty because environment variables are not reactive.

💡 Hint

Think about when environment variables are read and how refs work on reload.

On reload, import.meta.env.VITE_API_URL is read fresh and assigned to the ref, so the displayed value updates accordingly.