Nuxt3に移行する

#はじめに

いよいよ、Nuxt3の正式版のリリースが近づいてきました。
ロードマップをみると、[email protected]のリリース予定はJune,2022とあります。
それに伴って、周辺のCore Modulesなどの開発も進んでいるように思います。
このTweetをみてContentの開発がかなり進んでいることを確認できました。
今回は、コーポレートサイトをNuxt3に移行することについて記載したいと思います。
コーポレートサイトはNuxt2で作られているのですが、それをNuxt3に置き換えたときのメモになります。

#モチベーション

なぜNuxt3に移行するのか？

• Nuxt3のViteによるビルド高速化は、とても良い
• Nuxt3に統一することで学習コストを減らしたい
  • コーポレートサイトとは別に開発しているアプリケーションは既にNuxt3で作っている
  • 今後のメンテナンス性を考えてNuxt3に統一することで学習コストを減らしたい
• Nuxt3 RCでSSG(静的サイト生成)が動く
  • Nuxt3でSSGが動かなかったことが、移行することのボトルネックだった
• Nuxt Contentが実用段階になった
  • コーポレートサイトの大部分がNuxt Contentを利用してMarkdownを表示している
  • しかし、Nuxt ContentがNuxt3で動かないのが、移行することのボトルネックだった

これまでに何度か検証を行ってきましたが、それぞれ移行可能なレベルに達したと判断し、移行することにしました。

#現状

現状のコーポレートサイトは、主に下記のライブラリに依存していました。

• Nuxt2(SSG)
• Nuxt Content
• tailwind
  • tailwind typography
• modules
  • @nuxt/sitemap
  • @nuxtjs/gtm
• firebase hosting

#やったこと

• package選定

  • Nuxt2をNuxt3に置き換える
  • Nuxt contentをNuxt content edgeに置き換える
    • 参考1
    • 参考2
  • @nuxtjs/gtmはNuxt3で動かないので、代わりにvue-gtmで代用する
  • package.jsonの修正（抜粋）

  "dependencies": {
      "@gtm-support/vue-gtm": "1.4.0",
      "@nuxt/content": "npm:@nuxt/content-edge@latest",
      "@nuxt/vite-builder": "3.0.0-rc.3",
      "nuxt": "3.0.0-rc.3"
  }
  

• Vue2 から Vue3 に移行する

  • Composition APIに置き換える
    • CompositionAPIに置き換えるのは必須ではありませんが、可読性などを考えて置き換えることにしました
    • 各ComponentsのScript部分を全般的に書き換える
      • <script>を<script setup>に置き換える
      • computedを置き換える
      • reactiveなデータをrefなどで置き換える
  • filterを関数に置き換える

• Nuxt2からNuxt3に移行する

  • nuxt.config.jsをNuxt3のnuxt.config.tsに置き換える
  • staticディレクトリをpublicにリネーム
  • head()の代わりに、useHead()をつかう

• Nuxt Content v1からv2に移行する

  • こちらもv1からの移行ガイドがあるのでそれを参照しました

• gtm

  • vue-gtmのPluginを作成した

• sitemap

  • 旧サイトのsitemap.xmlをpublicに配置した（WORKAROUNDな対応）

#Nuxt3移行後の課題

• Code Highlightingが期待したものにならない
  • 調査中
• sitemap.xmlの手動管理
  • @nuxtjs/sitemapのNuxt3サポートに期待
• content-edgeは開発中でバギーな状態
  • 正式リリースされたら置き換える

#まとめ

コーポレートサイトは主にContentを使ったMarkdownからHTMLを生成しているサイトで、あまりNuxt,Vue.jsの機能を使っていないので、1日足らずで移行できました。
ガッツリNuxt2の機能などに依存していたり、規模が大きくなると大変そうです。
また、sitemap,gtmなどのnuxt-communityのモジュール郡は、まだ、Nuxt3に対応していないものがほとんどなので、移行する場合はモジュールがNuxt3に対応しているか、対応していない場合は他の方法で対応できるかを注意する必要があります。

一旦、いろいろ課題はありつつ移行ができました。
Nuxt3の寿命は長くあってほしい🙏