nuxt-modules

Env Valibot

Framework agnostic validation for type-safe environment variables

Never build your apps with invalid environment variables again. Validate and transform your environment with the full power of Valibot.

Install dependencies

npm install @techmely/env-valibot valibot

Create your schema

File example src/env.ts We need separate two function for client and server side - Because the security issues(when you define schema client here --> Will expose to client, hacker can reverse engine those code and do something with that)

import { string, url } from 'valibot';
import { accessEnvs } from "@techmely/env-valibot";
 
export const serverEnvs = accessEnvs({
  /*
   * Specify what prefix the client-side variables must have.
   * This is enforced both on type-level and at runtime.
   */
  clientPrefix: "PUBLIC_",
  server: {
    DATABASE_URL: z.string().url(),
    OPEN_AI_API_KEY: z.string().min(1),
  },
  /**
   * What object holds the environment variables at runtime.
   * Often `process.env` or `import.meta.env`
   */
  runtimeEnv: process.env,
});

export const clientEnvs = accessEnvs({
  /*
   * Specify what prefix the client-side variables must have.
   * This is enforced both on type-level and at runtime.
   */
  clientPrefix: "PUBLIC_",
  client: {
    PUBLIC_DOMAIN_URL: string([url()]),
    PUBLIC_SENTRY_DNS: string([url()]),
  },
  /**
   * What object holds the environment variables at runtime.
   * Often `process.env` or `import.meta.env`
   */
  runtimeEnv: process.env,
});

Nextjs, NuxtJs

Do the same things like above

import { string, url } from 'valibot';
import { accessEnvs } from "@techmely/env-valibot";
 
export const serverEnvs = accessEnvs({
  /*
   * Specify what prefix the client-side variables must have.
   * This is enforced both on type-level and at runtime.
   */
  clientPrefix: "PUBLIC_",
  server: {
    DATABASE_URL: z.string().url(),
    OPEN_AI_API_KEY: z.string().min(1),
  },
  /**
   * What object holds the environment variables at runtime.
   * Often `process.env` or `import.meta.env`
   */
  runtimeEnv: process.env,
});

export const clientEnvs = accessEnvs({
  /*
   * Specify what prefix the client-side variables must have.
   * This is enforced both on type-level and at runtime.
   */
  clientPrefix: "PUBLIC_",
  client: {
    PUBLIC_DOMAIN_URL: string([url()]),
    PUBLIC_SENTRY_DNS: string([url()]),
  },
  /**
   * What object holds the environment variables at runtime.
   * Often `process.env` or `import.meta.env`
   */
  runtimeEnv: process.env,
});

With Nextjs

In next.config.mjs

import "./src/env.mjs";
 
/** @type {import("next").NextConfig} */
const config = {
  /** ... */
};
 
export default config;

With Nuxtjs

In nuxt.config.ts

import "./src/env.ts";
 
export default defineNuxtConfig();

With AstroJs

In astro.config.mjs

import "./src/env.mjs";

import { defineConfig } from 'astro/config'

export default defineConfig();

With ViteJs App

In vite.config.(ts/js/mjs)

import "./src/env.(ts/js/mjs)";

import { defineConfig } from 'vite'

export default defineConfig();

With Qwik City

Do like ViteJs app do!