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.