vite-plugin-vue-env

1.0.6 verified Mon Apr 27 auth: no javascript

A Vite plugin that provides VUE_APP_* environment variables (like Vue CLI) to Vite projects. Version 1.0.6 requires Vite 2+. It performs string replacement (code.replace) to substitute process.env.VUE_APP_* with actual values at build time. Alternative to Vite's built-in import.meta.env, useful for migrating from Vue CLI. Includes TypeScript types.

Common errors

error TypeError: pluginEnv is not a function ↓

cause Using named import instead of default import.

fix

Change import to: import pluginEnv from 'vite-plugin-vue-env'

error Cannot find module 'vite-plugin-vue-env' ↓

cause Missing installation or incorrect package.json configuration.

fix

Run: npm i -D vite-plugin-vue-env

error process.env.VUE_APP_MY_VAR is undefined at runtime ↓

cause Variable does not start with VUE_APP_ prefix or .env file is missing.

fix

Ensure .env file contains VUE_APP_MY_VAR=value, or set variablePrefix.

error export 'pluginEnv' (imported as 'pluginEnv') was not found in 'vite-plugin-vue-env' ↓

cause Using named import for a default export.

fix

Use default import: import pluginEnv from 'vite-plugin-vue-env'

Warnings

breaking Plugin replaces process.env.VUE_APP_* with string literals; reassigning or mutating these values at runtime will not work. ↓

fix Use const and treat them as compile-time constants.

gotcha Default export only; named import returns undefined. ↓

fix Use default import: import pluginEnv from 'vite-plugin-vue-env'

gotcha CJS users must use .default: const pluginEnv = require('vite-plugin-vue-env').default ↓

fix Append .default to require.

deprecated Plugin is not actively maintained; last release 2021. Vite 4+ may have compatibility issues. ↓

fix Consider using Vite's native import.meta.env or 'dotenv' directly.

gotcha Only variables with prefix VUE_APP_ (default) are exposed; others are not replaced. ↓

fix Set variablePrefix option to include custom prefixes.

Install

npm install vite-plugin-vue-env

yarn add vite-plugin-vue-env

pnpm add vite-plugin-vue-env

Imports

default import

wrong

import { pluginEnv } from 'vite-plugin-vue-env'

correct

import pluginEnv from 'vite-plugin-vue-env'

Default import only; named import does not exist.

require style

wrong

const pluginEnv = require('vite-plugin-vue-env')

correct

const pluginEnv = require('vite-plugin-vue-env').default

CJS require must use .default because the package exports an ESM default.

TypeScript import type
```
import type { Options, Variables } from 'vite-plugin-vue-env'
```
Types are exported but not documented; Options and Variables may be undefined.

Quickstart

Configures vite-plugin-vue-env in Vite config with optional custom variables and prefix.

// vite.config.ts
import { defineConfig } from 'vite';
import pluginEnv from 'vite-plugin-vue-env';

export default defineConfig({
  plugins: [
    pluginEnv({
      // override env variables (optional)
      APP_ENV: 'development'
    }, {
      // customize prefix (optional)
      variablePrefix: 'VUE_APP_'
    })
  ]
});

// Then in your source code:
// console.log(process.env.VUE_APP_MY_VAR);