Nuxt mocking module

The module to deal with easily switching different api responses in the FE!

• ✨  Release Notes

Requirements

To use this module, you'll need to have the following in your module:

• Typescript
• Nuxt 3
• App.vue should use routing with NuxtPage

Features

• Returning API data from the module
• Creates a GUI on the route you want to easily change the responses of the requests

Quick Setup

Install the module to your Nuxt application with one command:

npm i nuxt-mocking-module --save-dev

or

yarn add nuxt-mocking-module --dev

After installing the package, make sure you add it to your Nuxt config file.

//Nuxt.config.ts

import { getMocks } from './mocking'

export default defineNuxtConfig({
  // Add to your Nuxt modules
  modules: ['nuxt-mocking-module'],
  // Set the Modules properties
  nuxtMockingModule: {
    mocks: getMocks(),
  },
})

That's it! You can now use My Module in your Nuxt app ✨

Module optionss

| Option | type | default | description | | ------------- |---------------- | ------------ | ----------------------------------------------------------------- | | isActive | boolean | true | Will disable the module when set to false. | | devOnly | boolean | true | Will enable the module only on dev build, if you set this on false make sure you have the nuxt part on a running server. | | port | string | '3000' | This is the port you will host the application on, it is required for the api request from the mocking route. | | apiRoutes | string[] | ['/api'] | Define all the root api routes that are used in the application. | | mockingRoute | string | '/mocking' | The route where the GUI part will be served. | | mocks | MocksGroup[] | [] | The mocked data object, read more about setting this up in mocked data object! |

Mocked data object

The module requires a mocked data object. The data object is based on the following interfaces (a full json object is also accepted):

// Mocked data object
Array<MocksGroup>

interface MocksGroup {
  groupName: string
  requests: Array<MockRequests>
}

interface MockRequests {
  name: string
  route: string
  method: string
  responses: Array<MockResponses>
}

interface MockResponses {
  name: string
  status: number
  delay?: string
  body: object
}

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release