nuxt-msw
v0.0.2
Published
mock api with MSW in Nuxt, both in the browser and on the server
Downloads
8
Readme
nuxt-msw
Mock api with MSW in your Nuxt app
Features
- ⛰ Zero config integration with MSW
- 🚠 Works both in the browser and on the server during SSR
Quick Setup
- Add
nuxt-msw
andmsw
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
- Add
nuxt-msw
to themodules
section ofnuxt.config.ts
and enable it in options:
export default defineNuxtConfig({
modules: [
'nuxt-msw'
],
msw: {
enabled: true
}
})
- 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