https://github.com/onecentlin/demo-vite-msw

Demo for Vite with MSW
https://github.com/onecentlin/demo-vite-msw

msw vite vue

Last synced: 7 days ago
JSON representation

Demo for Vite with MSW

• Host: GitHub
• URL: https://github.com/onecentlin/demo-vite-msw
• Owner: onecentlin
• Created: 2024-03-15T19:02:02.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-03-15T19:03:30.000Z (10 months ago)
• Last Synced: 2024-11-07T04:08:42.655Z (about 2 months ago)
• Topics: msw, vite, vue
• Language: JavaScript
• Homepage:
• Size: 18.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [DEMO] Vite + MSW

Demo Environment

- Vite 5.x

- Vue 3.4

- MSW 2.x ([Mock Service Worker](https://mswjs.io/) - API mocking library)

## Mock Service Worker

Install MSW

- https://mswjs.io/docs/getting-started

```

npm install msw@latest --save-dev

```

### Setup network handlers and browser integration

Create `src/mocks/handlers.js`

- https://mswjs.io/docs/concepts/request-handler

- https://mswjs.io/docs/basics/mocking-responses

Create `src/mocks/browser.js`

- https://mswjs.io/docs/integrations/browser

### Create Service Worker

Generate `mockServiceWorker.js` in public directory

- https://mswjs.io/docs/integrations/browser

```

npx msw init public --save

```

### Start worker

Make sure worker is ready for frontend app

```js

// src/main.js

import { createApp } from 'vue'

import App from './App.vue'

async function enableMocking() {

  if (!import.meta.env.DEV) {

    return

  }

  const { worker } = await import('./mocks/browser')

  return worker.start()

}

enableMocking().then(() => {

    createApp(App).mount('#app')

})

```