こんにちは、フロントエンドエンジニア小玉です。
先日Nuxt3ベータ版のリリースが発表されましたね。
Nuxt3ではVue3とViteのサポートに加えて。新しいサーバエンジンが搭載されるそうです。
いくつか新しい機能やアップデートがなされた中で、今回はNuxt Bridgeについて試してみたいと思います。
Nuxt Bridge
こちらは端的に言うと、Nuxt2を使用しているプロジェクトをよりスムーズにアップグレードするためのシステムです。
公式には以下のように書かれてます
Bridge is a forward-compatibility layer that allows you to experience many of new Nuxt 3 features by simply installing and enabling a Nuxt module.
（Bridgeは、Nuxtモジュールをインストールして有効にするだけで、Nuxt3の新機能の多くを体験できる上位互換性レイヤーです。：google翻訳）
主な機能として
- Nitroサーバーが使用できる
- CompositionAPIが使用できる（Nuxt3と同じ）
- 新しいCLIとDevtoolsが使用できる
などなど。
これまでNuxt2を使用していたプロジェクトをアップグレードするためにぜひ活用したいサービスですね。
使用手順
では早速公式に則ってNuxt Bridgeを使用してNuxt2プロジェクトをアップグレードしてみたいと思います。
Nuxt Bridgeのインストール
$ yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge or $ npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge
※余談ですが、僕はnodeのバージョンが古くてインストールに一度失敗しました。
The engine "node" is incompatible with this module. Expected version "^14.16.0 || ^16.11.0 || ^17.0.0". Got "15.8.0"
nodeのバージョンは上げておきましょう…。
スクリプトの更新
Nuxt3では新しくnuxiというCLIが導入されました。
そちらを使用するためにpackage.jsonを以下のように更新します。
"scripts": { - "dev": "nuxt-ts", + "dev": "nuxi dev", //nuxi のみではダメ - "build": "nuxt-ts build", + "build": "nuxi build", + "start": "node .output/server/index.mjs", - "generate": "nuxt-ts generate", + "generate": "nuxi generate", }, "dependencies": { - "nuxt": "^2.15.7" + "nuxt-edge": "latest" },
nuxt.config.js
module.exports、requireなど、Common.jsがサポートされなくなるそうなので、
nuxt.config.jsを以下のように書き換える必要があります。
export default { ssr: false, ...... }
import { defineNuxtConfig } from '@nuxt/bridge' export default defineNuxtConfig({ ssr: false, ...... })
以上で設定は完了です。
まとめ
今回は先日リリースされたNuxt Bridgeを試してみると言うことで、
自分はNuxt2を使用したいくつかのプロジェクトをNuxt Bridgeでアップグレードしてみました。
大方問題なくアップグレードができましたが、もちろんベータ版ということもあり、
tailwindcssが非対応@nuxt/content（1.x）がサポートされない、（2.x）に関しては書き換えが必要
とのことでした。
自分は@nuxt/contentとtailwindcssを使用したブログも作っていたのでそれはうまくアップグレードできませんでした。
未だ対応していないモジュールもありますが、Nuxt3ではNitroエンジンの搭載やTypescriptのサポート、Auto Importなど恩恵は数々あります。正式版のリリースが期待できますね。
最後に
Wizではエンジニアを募集しております。
興味のある方、ぜひご覧下さい！
