vite-plugin-fakery

Customized frontend testing APIs with realistic data

Mock API endpoints effortlessly with fully customizable data structures for frontend testing and development — all served by Vite, no backend needed.

Everything you need to get up and running

Simple Configuration
Get your first mock API up and running with just a few lines of code.
Realistic Data
Uses Faker.js to generate example names, addresses, images, and more that looks like real data.
Custom Endpoints
Define your own API endpoints and response structures with simple configuration.
Pagination
Your data is paginated by default. Easily configure default page size and total count, or override with each request.
Fast Development
Develop your frontend request logic without waiting for backend APIs to be ready.
GitHub
Open Source
Fully open source and free to use in any project under the MIT license.

Get Started

Get up and running in minutes. See the full documentation for more configuration options and advanced usage.

1. Installation

1npm install vite-plugin-fakery @faker-js/faker --save-dev

2. Configuration

Add the plugin to your Vite config:

1// vite.config.js
2import { defineConfig } from 'vite'
3import vitePluginFakery from 'vite-plugin-fakery'
4
5export default defineConfig({
6  // … other Vite options
7  plugins: [
8    vitePluginFakery({
9      endpoints: [
10        {
11          url: '/api/users',
12          responseProps: {
13            first_name: 'person.firstName',
14            last_name: 'person.lastName',
15          },
16        },
17      ],
18    }),
19  ],
20})

3. Make Requests

Fire up the Vite dev process and fetch from your new mock API:

1// In your frontend code
2fetch('/api/users')
3  .then(response => response.json())
4  .then(users => {
5    console.log(users);
6    // {
7    //    "total": 100,
8    //    "per_page": 10,
9    //    "data": [
10    //      { id: 1, first_name: "John", last_name: "Doe" },
11    //      { id: 2, first_name: "Jane", last_name: "Smith" }
12    //    ]
13    // }
14  });