Nuxt3に移行する(2)

はじめに

前回の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の設定を変更してあげれば良さそう。

  • nuxt.config.ts
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を更新します。

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

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

その他

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

まとめ

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