### Install vite-plugin-environment

Source: https://github.com/elmassimo/vite-plugin-environment/blob/main/README.md

Install the vite-plugin-environment package as a development dependency using npm or yarn.

```bash
npm i -D vite-plugin-environment # yarn add -D vite-plugin-environment
```

--------------------------------

### Load Prefixed Environment Variables

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

Automatically load all environment variables that start with a specific prefix, useful for migrating projects from other frameworks like Vue CLI or Create React App.

```javascript
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin('all', { prefix: 'VUE_APP_' }),
    EnvironmentPlugin('all', { prefix: 'REACT_APP_' }),
  ],
})
```

--------------------------------

### Custom envDir Configuration with Vite Plugin Environment

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

This example shows how to configure Vite Plugin Environment to load environment variables from a custom directory specified by Vite's `envDir` option. This allows for better organization of environment files. Variables are exposed to `process.env`.

```javascript
// vite.config.js
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  // Load .env files from the 'config' subdirectory
  envDir: 'config',
  plugins: [
    EnvironmentPlugin({
      API_KEY: undefined,
      APP_VERSION: 'v1',
    }),
  ],
})

// config/.env
// API_KEY=customkey123
// APP_VERSION=v4

// In your client code
console.log(process.env.APP_VERSION)  // Output: "v4"
console.log(process.env.API_KEY)      // Output: "customkey123"
```

--------------------------------

### Load Prefixed Environment Variables

Source: https://github.com/elmassimo/vite-plugin-environment/blob/main/README.md

Load all environment variables that start with a specific prefix (e.g., 'VUE_APP_' or 'REACT_APP_') by passing 'all' and the prefix option to EnvironmentPlugin. These variables can then be accessed using their original names.

```javascript
EnvironmentPlugin('all', { prefix: 'VUE_APP_' }),
EnvironmentPlugin('all', { prefix: 'REACT_APP_' })
```

--------------------------------

### Manual Vite Configuration Equivalent

Source: https://github.com/elmassimo/vite-plugin-environment/blob/main/README.md

This demonstrates the equivalent manual Vite configuration for exposing API_KEY and DEBUG environment variables using the 'define' option. The plugin automates this process and adds error handling for missing variables.

```javascript
import {
  defineConfig
} from 'vite'

export default defineConfig({
  define: {
    'process.env.API_KEY': JSON.stringify(process.env.API_KEY),
    'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
  }
})
```

--------------------------------

### EnvironmentPlugin - Loading All Prefixed Variables

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

Load all environment variables matching a specific prefix using the 'all' option combined with the prefix option. Useful for migrating from other build tools.

```APIDOC
## EnvironmentPlugin - Loading All Prefixed Variables

### Description
Loads all environment variables that start with a specified prefix. This is particularly useful for migrating projects from build tools like Vue CLI or Create React App.

### Method
`EnvironmentPlugin('all', { prefix: 'YOUR_PREFIX_' })`

### Endpoint
N/A (Vite Plugin Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// vite.config.js
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    // Load all VUE_APP_* variables
    EnvironmentPlugin('all', { prefix: 'VUE_APP_' }),

    // Load all REACT_APP_* variables
    EnvironmentPlugin('all', { prefix: 'REACT_APP_' }),
  ],
})
```

### Response
#### Success Response (200)
All environment variables matching the specified prefix are injected into the client code.

#### Response Example
```javascript
// .env
// VUE_APP_API_URL=https://api.example.com
// VUE_APP_VERSION=v4
// REACT_APP_TITLE=My App

// In your client code
console.log(process.env.VUE_APP_API_URL)   // Output: "https://api.example.com"
console.log(process.env.VUE_APP_VERSION)   // Output: "v4"
console.log(process.env.REACT_APP_TITLE)   // Output: "My App"
```
```

--------------------------------

### Multiple Plugin Instances for Varied Configurations

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

This configuration illustrates using multiple instances of Vite Plugin Environment to manage different sets of environment variables with distinct settings. One instance can define variables on `import.meta.env`, another on `process.env`, and a third can handle legacy prefixes.

```javascript
// vite.config.js
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    // Public configuration exposed on import.meta.env
    EnvironmentPlugin({
      APP_NAME: 'My App',
      APP_VERSION: '1.0.0',
    }, {
      defineOn: 'import.meta.env'
    }),

    // API configuration on process.env (required values)
    EnvironmentPlugin({
      API_KEY: undefined,
      API_URL: 'https://api.example.com',
    }),

    // Legacy Vue app variables
    EnvironmentPlugin('all', {
      prefix: 'VUE_APP_',
      defineOn: 'process.env'
    }),
  ],
})

// In your client code
const appName = import.meta.env.APP_NAME     // "My App"
const apiKey = process.env.API_KEY           // From .env (required)
const legacyVar = process.env.VUE_APP_TITLE  // Any VUE_APP_* variable
```

--------------------------------

### EnvironmentPlugin - Basic Array Usage

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

Expose a list of environment variables to your client code by passing an array of variable names. The build will fail if any specified variable is not defined in .env files or process.env.

```APIDOC
## EnvironmentPlugin - Basic Array Usage

### Description
Exposes a list of environment variables to client code. The build fails if any specified variable is missing.

### Method
`EnvironmentPlugin([...variableNames])`

### Endpoint
N/A (Vite Plugin Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// vite.config.js
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin(['API_KEY', 'APP_VERSION']),
  ],
})
```

### Response
#### Success Response (200)
Environment variables are injected into the client code.

#### Response Example
```javascript
// .env.production
// API_KEY=d2fab04aacaad208
// APP_VERSION=v2

// In your client code (app.js)
console.log(process.env.APP_VERSION)  // Output: "v2"
console.log(process.env.API_KEY)      // Output: "d2fab04aacaad208"
```
```

--------------------------------

### Expose Environment Variables via Array

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

Configure the plugin by passing an array of variable names. The build process will throw an error if any of the specified variables are missing from the environment.

```javascript
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin(['API_KEY', 'APP_VERSION']),
  ],
})
```

--------------------------------

### Expose Variables to import.meta.env

Source: https://github.com/elmassimo/vite-plugin-environment/blob/main/README.md

Configure EnvironmentPlugin to expose environment variables to import.meta.env instead of the default process.env. This is useful for Vite SSR or when porting apps.

```javascript
EnvironmentPlugin({ APP_VERSION: 'local' }, { defineOn: 'import.meta.env' })
```

--------------------------------

### Configure Vite with EnvironmentPlugin (Object with Defaults)

Source: https://github.com/elmassimo/vite-plugin-environment/blob/main/README.md

Configure Vite to expose environment variables with default values using an object. If a variable is not defined in the environment, its specified default value will be used. Use null for optional variables and undefined for required variables.

```javascript
EnvironmentPlugin({
  // Uses 'development' if the NODE_ENV environment variable is not defined.
  NODE_ENV: 'development',

  // Have in mind that variables coming from process.env are always strings.
  DEBUG: 'false',

  // Required: will fail if the API_KEY environment variable is not provided.
  API_KEY: undefined,
 
  // Optional: will not fail if the APP_VERSION environment variable is missing.
  APP_VERSION: null,
})
```

--------------------------------

### Configure Variables with Default Values

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

Map variable names to default values. Use undefined for required variables that must exist, null for optional variables, and strings for default values.

```javascript
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin({
      NODE_ENV: 'development',
      APP_VERSION: 'v2',
      APP_RELEASE: null,
      API_KEY: undefined,
    }),
  ],
})
```

--------------------------------

### EnvironmentPlugin - Object with Default Values

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

Provide an object mapping variable names to default values. Variables can be required (undefined), optional (null), or have specific string defaults.

```APIDOC
## EnvironmentPlugin - Object with Default Values

### Description
Configures environment variables with default values. Supports required variables (build fails if missing), optional variables (do not fail if missing), and string defaults.

### Method
`EnvironmentPlugin({ variableName: defaultValue, ... })`

### Endpoint
N/A (Vite Plugin Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// vite.config.js
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin({
      NODE_ENV: 'development',
      APP_VERSION: 'v2',
      APP_RELEASE: null, // Optional
      API_KEY: undefined, // Required
    }),
  ],
})
```

### Response
#### Success Response (200)
Environment variables with their specified defaults are injected into the client code.

#### Response Example
```javascript
// .env.development
// API_KEY=d2fab04aacaad208
// APP_VERSION=v3

// In your client code
// Development mode: process.env.APP_VERSION = "v3"
// Production mode: process.env.APP_VERSION = "v2" (default value)
console.log(process.env.APP_VERSION)
```
```

--------------------------------

### Configure Vite with EnvironmentPlugin (Array)

Source: https://github.com/elmassimo/vite-plugin-environment/blob/main/README.md

Configure Vite to expose specific environment variables to client code by passing an array of variable names to the EnvironmentPlugin. These variables can then be accessed via process.env.

```javascript
import {
  defineConfig
} from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin(['API_KEY', 'DEBUG']),
  ],
})
```

--------------------------------

### Ignore .env Files

Source: https://github.com/elmassimo/vite-plugin-environment/blob/main/README.md

Configure EnvironmentPlugin to ignore .env files and only use environment variables defined directly in process.env by setting loadEnvFiles to false.

```javascript
EnvironmentPlugin(['API_KEY'], { loadEnvFiles: false })
```

--------------------------------

### EnvironmentPlugin - Custom defineOn Target

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

Expose variables on a different object using the defineOn option. By default, variables are exposed on process.env, but this can be changed to import.meta.env or any other target.

```APIDOC
## EnvironmentPlugin - Custom defineOn Target

### Description
Allows you to specify a different target object for exposing environment variables, instead of the default `process.env`. This can be useful for compatibility or specific project structures.

### Method
`EnvironmentPlugin(options)` where `options.defineOn` is set to the desired target string.

### Endpoint
N/A (Vite Plugin Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// vite.config.js
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    // Expose VUE_APP_* variables on import.meta.env
    EnvironmentPlugin('all', {
      prefix: 'VUE_APP',
      defineOn: 'import.meta.env'
    }),

    // Expose API_KEY on process.env (default)
    EnvironmentPlugin({ API_KEY: undefined }),
  ],
})
```

### Response
#### Success Response (200)
Environment variables are exposed on the specified `defineOn` target.

#### Response Example
```javascript
// .env.production
// VUE_APP_VERSION=v2
// API_KEY=d2fab04aacaad208

// In your client code (app.js)
console.log(import.meta.env.VUE_APP_VERSION)  // Output: "v2"
window.apiKey = process.env.API_KEY           // Assigns: "d2fab04aacaad208"
```
```

--------------------------------

### Customize Variable Exposure Target

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

Use the defineOn option to change where variables are exposed. By default, they are attached to process.env, but this can be changed to import.meta.env or other targets.

```javascript
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin('all', {
      prefix: 'VUE_APP',
      defineOn: 'import.meta.env'
    }),
    EnvironmentPlugin({ API_KEY: undefined }),
  ],
})
```

--------------------------------

### Disable .env File Loading with Vite Plugin Environment

Source: https://context7.com/elmassimo/vite-plugin-environment/llms.txt

This snippet demonstrates how to disable the automatic loading of .env files and exclusively use environment variables set in the terminal or CI/CD. It's useful when variables are managed externally. The plugin exposes specified variables to `process.env`.

```javascript
// vite.config.js
import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    // Only use process.env values, ignore .env files
    EnvironmentPlugin(['API_KEY', 'DATABASE_URL'], {
      loadEnvFiles: false
    }),
  ],
})

// Terminal: Set environment variables before running vite
// $ API_KEY=secret123 DATABASE_URL=postgres://localhost/db npm run build

// In your client code
console.log(process.env.API_KEY)       // Output: "secret123"
console.log(process.env.DATABASE_URL)  // Output: "postgres://localhost/db"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.