Nuxt BridgeでNuxt3への準備をする

Nuxt公式のリリーススケジュールによると、ついにNuxt3のstableが2022年6月に来るようです<br> メンヘラテクノロジーではメインのプロダクトはNuxtで動いているため、弊社でもNuxt3を楽しみにしています<br>

Nuxt Bridgeとは

Nuxt Bridgeというforward-compatibilityなものがあり、Nuxt2のまま3の機能を体験できるようです<br> Nuxtの公式もNuxt3へのアップデートに向けて、Nuxt Bridgeというものを使って準備しておくことを推奨しているようなのでNuxt Bridgeを入れてみます

導入作業

インストール

手順は公式のドキュメントに従っていきます<br> まずは既存の yarn.lock と node_modules を一旦削除します

$ rm yarn.lock
$ rm -rf node_modules

<br> 次に `nuxt-edge` と `@nuxt/bridge-edge` をインストールします

$ yarn add nuxt-edge
$ yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

configファイルの書き換え

Nuxt3からはcliがnuxiというコマンドになったので package.json のスクリプトも書き換えます

# package.json

"scripts": {
  "dev": "nuxi dev",
  "build": "nuxi build", // staticな場合は nuxi generate
  "start": "nuxi preview",
  ...
}

<br> 次に　`nuxt.config.js`を書き換えます。`module.exports`などのCommonJSの書き方が使えなくなったので `defineNuxtConfig` を使うそうです

# nuxt.config.js

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Your existing configuration
})

<br> 最後に `tsconfig.json` を書き換えます。これでNuxtが自動生成した型も使えるようになります

"extends": "./.nuxt/tsconfig.json",

その他

Nuxt3ではデフォルトでtypescriptがサポートされているため、不要になったモジュールを削除します

$ yarn remove @nuxt/typescript-build

<br> また、 `yarn dev` するとconsoleに `Cannot destructure property '__extends' of '_tslib_js__WEBPACK_IMPORTED_MODULE_0___default'` というエラーが表示されました。この問題は[こちら](https://github.com/nuxt/bridge/issues/25)のissueで書いてあるように `nuxt.config.js` に追記することで解決できました

# nuxt.config.js
export default defineNuxtConfig({
  alias: {
    tslib: 'tslib/tslib.es6.js'
  },
  ...
})

感想

ビルドが鬼速くなりました。これだけでとてもうれしいです<br> Vue3で追加されたComposition APIや、useAsyncDataやuseFetchへの書き換えなどはこれからやっていこうと思います