Nuxt3に移行する（２）

はじめに

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

その他

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

まとめ

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