Environment Variables

Manage configuration and secrets safely in a Vite-powered Vue project.

.env Files in Vite

Vite automatically loads variables from .env files at the project root, exactly like the Next.js convention covered earlier in this platform's courses.

# .env.local
VITE_API_BASE_URL=https://api.example.com
DATABASE_URL=postgres://user:pass@localhost/mydb

The VITE_ Prefix Requirement

Unlike a full-stack framework, a plain Vite-powered Vue app is entirely client-side — everything ships to the browser. To make this explicit and prevent accidentally leaking a secret, only variables prefixed with VITE_ are exposed to your app code at all.

A Plain Vue SPA Has No Server-Only Secrets

Since a Vite SPA runs entirely in the browser, nothing in it can ever be a true secret — an API key referenced anywhere in client code, VITE_-prefixed or not, is visible to anyone who opens dev tools. Real secrets belong on your backend (or in Nuxt's server/ routes), never in the SPA itself.

Accessing Variables in Code

Vite exposes environment variables through the import.meta.env object, not process.env (which is a Node.js concept, not available in browser code by default).

const apiUrl = import.meta.env.VITE_API_BASE_URL;

fetch(`${apiUrl}/posts`);

In a Nuxt project, server-only variables (without the VITE_ equivalent restriction) can be read safely inside server/api/ routes, since that code genuinely runs only on the server.

FAQs

Do I need to restart the dev server after changing .env.local?

Yes — environment variables are read when Vite starts, so a restart is required to pick up changes.

Where do I set environment variables in production?

In your hosting platform's dashboard or build configuration — .env files are for local development and typically aren't deployed as-is.

Summary

Vite exposes VITE_-prefixed variables through import.meta.env, with the important caveat that a plain SPA has no true secrets since everything ships to the browser. Next, you'll deploy a finished Vue app to production.

Next Lesson →