nuxt3の素振りついでに、最近よくzennなどで見るmock service workerを導入してみた。
mock service workerについては以下参照。 mswjs.io
nuxt3環境構築
npx nuxi init YOUR-PROJECT-NAME
mswをインストール
npm i -D msw
msw関連ファイル追加
./mocks/handlers.ts
import { rest } from "msw"; export const handlers = [ rest.get("/users", (_, res, ctx) => { return res( ctx.status(200), ctx.json({ users: [ { id: 1, name: "hogehoge", }, { id: 2, name: "fugafuga", }, { id: 3, name: "piyopiyo", }, ], }) ); }), ];
./mocks/browser.ts
import { setupWorker } from "msw"; import { handlers } from "./handlers"; export const worker = setupWorker(...handlers);
Service Workerを生成
npx msw init public/ --save
多分、saveオプションはつけなくても問題ない。
./plugins/mock.client.ts
import { worker } from "@/mocks/browser"; export default defineNuxtPlugin(async () => { if (process.env.DEBUG) { // NODE_ENVのが適切かもしれない await worker.start({ onUnhandledRequest: "bypass", }); } });
呼び出し側
<template> <div> <template v-if="pending"> <p>loading...</p></template> <template v-else-if="error"> <p>{{ error }}</p></template > <template v-else> <ul> <li v-for="user in data.users">{{ user.id }}: {{ user.name }}</li> </ul> </template> </div> </template> <script setup lang="ts"> const { data, pending, error } = useFetch("/users", { server: false, }); </script>
参考リポジトリ
作ってみた。
設定数少なく利用できて最高です。 nuxt2もほぼ変わらずこれで設定可能なはず。