Skip to content

Support runtime access in Vite for prefixed vars (e.g. VITE_*) #288

@yamcodes

Description

@yamcodes

When using @arkenv/vite-plugin in a Vite + React project, the plugin validates environment variables at build time but doesn't provide a type-safe way to access them in the frontend runtime. Vite only exposes environment variables prefixed with VITE_ to import.meta.env, but there's no exported, validated env object to import.

Steps to Reproduce:

  1. Create a React template with Vite.
  2. Install @arkenv/vite-plugin and configure it in vite.config.ts.
  3. Try to import the validated env object in frontend code.
  4. Result: No env object is exported, must manually access import.meta.env.VITE_*.

Expected behavior:

The plugin should export a type-safe env object that can be imported in frontend code, similar to how createEnv works in Node environments.

Current workaround:

Manually access each variable via import.meta.env:

// No type safety, no validation at runtime
const apiUrl = import.meta.env.VITE_API_URL;

Desired API:

import { env } from "virtual:arkenv";

// Type-safe and validated
const apiUrl = env.VITE_API_URL;

Related:

Action Items:

  • Export a virtual module that provides the validated env object.
  • Support configurable prefix (default: VITE_*).
  • Ensure TypeScript types are generated for the virtual module.

Metadata

Metadata

Assignees

No one assigned

    Labels

    @arkenv/vite-pluginIssues or Pull Requests involving the Vite plugin for ArkEnvenhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions