nuxt-msw

Mock api with MSW in your Nuxt app

• ✨  Release Notes

Features

• ⛰  Zero config integration with MSW
• 🚠  Works both in the browser and on the server during SSR

Quick Setup

1. Add nuxt-msw and msw dependencies to your project

# Using pnpm
pnpm add -D nuxt-msw msw

# Using yarn
yarn add --dev nuxt-msw msw

# Using npm
npm install --save-dev nuxt-msw msw

2. Add nuxt-msw to the modules section of nuxt.config.ts and enable it in options:

export default defineNuxtConfig({
  modules: [
    'nuxt-msw'
  ],
  msw: {
    enabled: true
  }
})

3. Write some request handlers in msw/handlers.ts.

import { http, HttpResponse } from 'msw'

export default [
  http.get('https://example.com/api/user/1', () => HttpResponse.json({
    id: 12,
    name: 'Albert Einstein'
  })),
  http.post('https://example.com/api/user', () => HttpResponse.text('OK')),
]

That's it! Now the specified requests are intercepted by MSW both in the browser and on the server during SSR ✨

const { data } = useFetch('https://example.com/api/user/1')
watch(data, (value) => {
  console.log(value) // { id: 12, name: 'Albert Einstein' }
})

Development

# Install dependencies
yarn install

# Generate type stubs
yarn run dev:prepare

# Develop with the playground
yarn run dev

# Build the playground
yarn run dev:build

# Run ESLint
yarn run lint

# Run Vitest
yarn run test
yarn run test:watch

# Release new version
yarn run release