Format & Extension

Commonjs

Write mock configuration file in CommonJS format

api.mock.cjs

/**
 * @type {import('vite-plugin-mock-dev-server').MockHttpItem}
 */
module.exports = {
  url: '/api/common-js',
  body: {
    message: 'Write mock configuration using a CommonJs file.',
  },
}

ESModule

Write mock files using ESModule

api.mock.js

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/javascript',
  body: {
    message: 'Write mock configuration using a js file.',
  },
})

api.mock.ts

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock([
  {
    url: '/api/typescript',
    body: {
      message: 'Write mock configuration using a typescript file.',
    },
  },
])

api.mock.mjs

/**
 * @type {import('vite-plugin-mock-dev-server').MockOptions}
 */
export default [
  {
    url: 'api/post/1',
    body: {}
  },
  {
    url: 'api/post/2',
    body: {}
  }
]

api.mock.ts

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock([
  {
    url: 'api/post/1',
    body: {}
  },
  {
    url: 'api/post/2',
    body: {}
  }
])

JSON

Write mock files using JSON/JSON5 format

api.mock.json

{
  "url": "/api/json",
  "headers": {
    "X-Custom-Header": "your custom header"
  },
  "body": {
    "message": "Write mock configuration using a json file."
  }
}

api.mock.json5

{
  "url": "/api/json5",
  "headers": {
    "X-Custom-Header": "your custom header"
  },
  "body": {
    "message": "Write mock configuration using a json5 file."
  }
}