vite-plugin-mock-simple

1.0.3 verified Mon Apr 27 auth: no javascript maintenance

A lightweight Vite plugin providing local mock APIs during development, with HMR support for mock files. Version 1.0.3 (stable, last release unchanged from 1.0.1) is a TypeScript-based fork of vite-plugin-mock-server with zero dependencies. Supports ant-style path patterns, JSON bodies, custom handlers, and configurable delays. Differentiators: zero external dependencies beyond Vite, simple API using arrays of route definitions, and optional JSON shorthand via `jsonBody`.

Common errors

error Cannot find module 'vite-plugin-mock-simple' or its corresponding type declarations ↓

cause Package is installed as devDependency but not imported correctly, or TypeScript cannot resolve types.

fix

Ensure package is in devDependencies: npm i -D vite-plugin-mock-simple. If type errors persist, add to tsconfig.json compilerOptions.types or skipLibCheck.

error TypeError: mockSimple is not a function ↓

cause Incorrect import style (e.g., using named import `{ mockSimple }` when it's a default export).

fix

Use default import: import mockSimple from 'vite-plugin-mock-simple'.

error Error: pattern and handle/jsonBody are required for mock route definition ↓

cause Route object is missing either `handle` or `jsonBody`, or pattern is undefined.

fix

Every route definition must include pattern and exactly one of handle or jsonBody. Example: { pattern: '/api/test', jsonBody: {} }.

Warnings

gotcha MockHandler interface has mutually exclusive properties: if `jsonBody` is specified, `handle` must not be present; vice versa. ↓

fix Use either `handle` or `jsonBody` per route definition, not both.

gotcha The `method` property supports comma-separated values (e.g., 'GET, POST') but is case-insensitive. However, incorrect spacing (e.g., 'GET,POST') may cause one method to be ignored. ↓

fix Use consistent comma+space separation: 'GET, POST, DELETE'. Trim spaces around methods.

gotcha `pattern` uses ant-style path matcher; wildcards like `**` work, but leading slash is required for path matching. Patterns missing leading slash may never match. ↓

fix Always start pattern with `/` (e.g., `/api/**`).

gotcha Default method is GET. If you define a `pattern` without specifying `method`, it only matches GET requests. POST/PUT etc. must be explicitly set. ↓

fix Add `method: 'POST'` or `method: 'GET, POST'` if you need multiple methods.

Install

npm install vite-plugin-mock-simple

yarn add vite-plugin-mock-simple

pnpm add vite-plugin-mock-simple

Imports

mockSimple

wrong

const mockSimple = require('vite-plugin-mock-simple')

correct

import mockSimple from 'vite-plugin-mock-simple'

ESM-only; package does not expose CJS require

MockHandler

import { MockHandler } from 'vite-plugin-mock-simple'

TypeScript type export

ConfigOptions

wrong

import { ConfigOptions } from 'vite-plugin-mock-simple'

correct

import type { ConfigOptions } from 'vite-plugin-mock-simple'

ConfigOptions is a type; use type import for clarity, though value import also works at runtime

Quickstart

Vite config with mockSimple plugin: three route examples – custom handler, JSON response, and delayed response.

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import mockSimple from 'vite-plugin-mock-simple';

export default defineConfig({
  plugins: [
    vue(),
    mockSimple([
      {
        pattern: '/api/hello',
        method: 'GET',
        handle: (req, res) => {
          res.setHeader('Content-Type', 'application/json');
          res.end(JSON.stringify({ message: `Hello from ${req.url}` }));
        }
      },
      {
        pattern: '/api/data',
        jsonBody: { foo: 'bar' }
      },
      {
        pattern: '/api/delayed',
        delay: 500,
        jsonBody: { status: 'ok' }
      }
    ])
  ]
});