2022.05.15

Nuxt BridgeでNuxt3への準備をする

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

Nuxt Bridgeとは

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

導入作業

インストール

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

$ rm yarn.lock
$ rm -rf node_modules

次に 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",
  ...
}

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

# nuxt.config.js

import { defineNuxtConfig } from '@nuxt/bridge'

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

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

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

その他

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

$ yarn remove @nuxt/typescript-build

また、 yarn dev するとconsoleに Cannot destructure property '__extends' of '_tslib_js__WEBPACK_IMPORTED_MODULE_0___default' というエラーが表示されました。この問題はこちらのissueで書いてあるように nuxt.config.js に追記することで解決できました

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

感想

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