Nuxt3に移行する（２）

2022-06-05

#はじめに

前回のNuxt3移行記事からNuxt Content V2が正式にリリースされたのを機に、いくつか課題が合った部分を解消していく。

#Nuxt3移行後の課題

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

#Nuxt ContentのCode Highlightingのサポート言語を追加する

Nuxt Content V2ではShikiというCode Highlighterを使用している。
これの設定が不足しており、Code Highlightingが期待したものにならなかった。デフォルトだとこちらのリンクにある言語がサポートされる模様だが、たとえば、Go,Dockerfile,Makefileなどはサポートされていない。特にエラーメッセージが出ずに原因がわかっていなかったが、いろいろ試しているうちにエラーメッセージが出力されるケースがあり、気づいた。
ShikiのLanguageの設定を変更してあげれば良さそう。

export default defineNuxtConfig({
  // 省略...
  content: {
    highlight: {
      preload: [
        'bash',
        'diff',
        'docker',
        'go',
        'graphql',
        'html',
        'js',
        'json',
        'makefile',
        'ts',
        'vue',
        'yaml'
      ]
    }
  }
})

Shiki Languages参考

#Nuxt Content V2のSitemap出力する

Nuxt ContentのGuideページにSitemap Generationがあるので、これをそのまま実装すれば解決しました。
server側でsitemap.xmlを生成する処理を実装して、Prerenderingでsitemap.xmlが出力できる機能のようです。これは便利です。

#Nuxt Content V2を正式版に更新する

packageを更新します。

  "devDependencies": {
    // 省略...
    "@nuxt/content": "2.0.1"
  }

Content ComponentやqueryDocumentなど、いくつか破壊的な変更がありましたので、その対応をしました。
最新のAPIドキュメントを参照すると良いでしょう。割とメジャーアップデート直前のバージョンを使っていたつもりですが、結構ガッツリ変わっていてびっくりしました。

#その他

Tailwindを使ってNuxt Content V2を始める場合は、このTemplatesを利用すると良いでしょう。
DarkModeとLightModeの切り替えがサポートされていたりして、使いやすそうです。他にもアイコンやComponentsの利用例が入っているので、参考になります。

#まとめ

今回は前回のNuxt3移行後の課題（主にNuxt Contentの課題）を解決しました。
Code Highlightingが期待したものにならないのは、深刻な問題だったので解決出来てよかったです。
また、無事にNuxt Content V2正式版に移行ができて、安定してくれることを期待しています。
Nuxt Content V2はかなり使いやすいAPIに仕上がっているので、とても良い開発者体験になりました。