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に仕上がっているので、とても良い開発者体験になりました。


クラウドアンドビルド株式会社

Cloud and Build, Inc.

クラウドアンドビルド株式会社は、Google Cloud パートナー企業です。

GCP 導入から開発・コンサルティングまでワンストップでお任せください。

お問い合わせ

デジタル変革を開始しますか?

お気軽にお問い合わせください。

contact_at_cloudandbuild.jp
所在地

〒305-0031

茨城県つくば市吾妻2丁目5番地1

つくばスタートアップパーク

Designed by Freepik
© 2020 Cloud and Build, Inc.