nuxt3にmock service workerを導入する

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>

参考リポジトリ

作ってみた。

github.com

設定数少なく利用できて最高です。 nuxt2もほぼ変わらずこれで設定可能なはず。