
Why I Built a New Vite Env Plugin
The four problems with plain Vite environment variables — and the plugin I wrote to fix them. This is what environment variables look like in a Vite project: import . meta . env . VITE_PORT // "5173" — string, not number import . meta . env . VITE_DARK // "true" — string, not boolean import . meta . env . VITE_API_URL // string | undefined — no validation Every value is a raw string. There's no validation, no server/client boundary, no leak detection. The only way to get types is a vite-env.d.ts you write and maintain by hand. Four problems. I built a plugin that fixes all of them. Problem 1: Everything is a string You coerce values yourself. A forgotten Number() or a === true on a string is a quiet bug that passes every check until it doesn't. Problem 2: No server/client boundary Variables prefixed with VITE_ go to the client. Everything else stays server-side. That's the convention. There's no enforcement, no explicit split, no warning if you cross the line. // shared/config.ts — imp
Continue reading on Dev.to
Opens in a new tab