basic

Nuxt + varlock example

Minimal Nuxt 4 app using varlock via @varlock/nuxt-integration for validated, type-safe env vars.

What it demonstrates

• .env.schema as the single source of truth (.env.schema), with generated TS types (env.d.ts) — the module auto-registers the generated types with all of Nuxt 4's split TS projects, so ENV is typed in both app/ and server/ code
• editing .env.schema (or any varlock-loaded env file) automatically restarts the dev server
• typed ENV usage inside nuxt.config.ts itself (via import 'varlock/auto-load' at the top of the file — needed because nuxt evaluates config before modules run); SITE_TITLE drives app.head.title, and config-time values stay in sync across the automatic dev restarts too
• ENV usage in pages — inlined into the client bundle at build time for non-sensitive items
  • app/pages/index.vue — SSR + hydrated page showing static replacement of unprefixed (GREETING) and prefixed (NUXT_PUBLIC_PREFIXED_ITEM) keys, via both script-setup consts and direct {{ ENV.X }} template interpolation — inlining is driven by @sensitive in the schema, not by a NUXT_PUBLIC_ name prefix
  • app/pages/client.vue — browser-only access
  • app/pages/dynamic.vue — a public @dynamic item (PUBLIC_DYNAMIC_ITEM), excluded from build-time inlining and loaded at runtime via loadPublicDynamicEnv(), served by the /__varlock/public-env endpoint the module auto-injects when public+dynamic items exist
• ENV in nitro server routes — server/api/data.ts
• Security guardrails (app/pages/api-demo.vue):
  • server/api/leaky.ts — a route that tries to return a sensitive value; varlock blocks the response
  • server/api/log.ts — logs a secret; varlock redacts it in the server console

Usage

pnpm install
pnpm dev        # dev server
pnpm build      # production build
pnpm preview    # run built server via `varlock run` (default 'init-only' ssrInjectMode)

See the varlock.ssrInjectMode comment in nuxt.config.ts for the other server env injection modes (auto-load, resolved-env).