Public browser variables

Expose configuration intended for the browser.

Use Vite's VITE_ prefix for public configuration. Add a value to your encrypted .env file:

$ npx dotenvx set VITE_SITE_NAME "My app"

$ pnpm exec dotenvx set VITE_SITE_NAME "My app"

Read it in a component:

export function SiteName() {
  return <span>{import.meta.env.VITE_SITE_NAME}</span>
}

Restart npm run dev or pnpm dev after changing .env.

For production, add VITE_SITE_NAME to .env.production using the same command with -f .env.production. Follow Build-time configuration to decrypt it before Vite builds.

VITE_ values are embedded in browser code. Encryption protects the committed file, but visitors can read the built values. Keep credentials unprefixed and inside server loaders or actions. See Vite environment variables.