Flat layout

In this setup, you define all your environment variables in a single flat object.

To protect server-side secrets from ever reaching the client bundle in the browser, ArkEnv uses a proxy that throws a runtime error if a server-side variable is accessed in browser code. Note that during Server-Side Rendering (SSR), client-shared code executes on the server first, where this runtime guard is not active. See the Security model page for more details.

Setup

The easiest way to bootstrap the flat layout is with the ArkEnv CLI. It automatically configures @arkenv/nuxt for your existing Nuxt project and generates your env.ts file.

npx @arkenv/cli@latest init

pnpm dlx @arkenv/cli@latest init

yarn dlx @arkenv/cli@latest init

bunx @arkenv/cli@latest init

Your schema

When bootstrapping with the CLI, it generates a single env.ts file where you define your environment variables directly in a flat structure:

export const env = arkenv({
	DATABASE_URL: "string",
	NUXT_PUBLIC_API_URL: "string",
	NODE_ENV: "'development' | 'production' | 'test' = 'development'",
});

Exposing client variables

By default, ArkEnv automatically identifies and exposes variables to the client based on two criteria:

1. Keys prefixed with NUXT_PUBLIC_ (e.g. NUXT_PUBLIC_API_URL).
2. The NODE_ENV variable (which is implicitly shared to align with Nuxt's runtime config).

If you have custom variables that do not follow the prefix convention but must be exposed to the client, you can specify them using the exposeToClient option:

export const env = arkenv({
	DATABASE_URL: "string",
	NUXT_PUBLIC_API_URL: "string",
	CUSTOM_VAR: "string",
}, {
	exposeToClient: ["CUSTOM_VAR"]
});