#Nuxt #MSW
[[📜Nuxt3プロジェクトでMSWを使ってみる]]...ことはできなかったので[[Nuxt Bridge]]で再挑戦。
## [[Nuxt2]]プロジェクト作成
```console
$ npm init nuxt-app nuxt-bridge-msw-use
create-nuxt-app v3.7.1
✨ Generating Nuxt.js project in nuxt-bridge-msw-use
? Project name: nuxt-bridge-msw-use
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: Prettier
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
```
## [[Nuxt Bridge]]プロジェクトへ変換
### [[Nuxt2]]をedgeバージョンにアップデート
```console
cd nuxt-bridge-msw-use
rm package-lock.json
```
`package.json`を変更。
```diff
- "nuxt": "^2.15.7",
+ "nuxt-edge": "latest",
```
再インストール。
```console
npm i
```
### [[Nuxt Bridge]]のインストール
```console
npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge
```
[[package.json]]の`scripts`コマンドを`nuxt`から`nuxi`に変更。
```diff
"scripts": {
- "dev": "nuxt",
+ "dev": "nuxi dev",
- "build": "nuxt build",
+ "build": "nuxi build",
- "start": "nuxt start",
+ "start": "nuxi preview"
- "generate": "nuxt generate",
+ "generate": "nuxi generate",
```
### [[nuxt.config]]の変更
`nuxt.config.js`を変更。
```diff
+ import { defineNuxtConfig } from '@nuxt/bridge'
import colors from 'vuetify/es5/util/colors'
- export default {
+ export default defineNuxtConfig({
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
..中略..
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
- // https://go.nuxtjs.dev/typescript
- '@nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
],
..中略..
- }
+ })
```
### [[tsconfig.json]]の変更
```diff
{
+ "extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
```
### [[TypeScript]]のモジュール削除
```console
npm uninstall @nuxt/typescript-build
```
### [[gitignore]]に追加
```diff
+ .output
```
## 起動
```console
$ npm run dev
ERROR Cannot start nuxt: Plugin not found: C:\Users\tadashi-aikawa\git\github.com\tadashi-aikawa\nuxt-bridge-msw-use\.nuxt\components\plugin.js 00:29:32
at node_modules\@nuxt\builder-edge\dist\builder.js:541:15
at async Promise.all (index 0)
```
==該当ファイルはあるのにエラーが出る。。==