genko.meDocs

Nuxt

Nuxtでgenko.meの記事一覧と詳細をSSRで表示する方法。server/ルートでの取得、ページ送り、下書きプレビューの全体像。

Nuxtでは、server/のルートでコンテンツを取得し、@genko-me/vueの表示部品で描きます。取得はサーバー側だけで動くので、APIキーはブラウザへ出ません。記事一覧も詳細もSSRで返るため、検索エンジンとSNSのクローラーにそのまま読まれます。

配信APIはただのRESTなので、Nuxt以外でも利用できます。この対象の強みは、SSRとサーバー側の取得口が最初から用意されていることです。

使うパッケージ

パッケージ役割
@genko-me/sdk配信APIのクライアント。createGenkoで型付きの取得メソッドを作る
@genko-me/vueListClient・EntryProvider・ListItem・Pagination・ShareButtonsなどの表示部品
@genko-me/vue/serverfetchGenkoList・fetchGenkoEntry・loadGenkoPage。server/からだけ呼ぶ
@genko-me/cliスキーマから型と接続ファイルを生成・同期する

@genko-me/vueはVue 3.5以上をpeerDependenciesに指定しています。専用のNuxtモジュールは用意していません。部品の一括登録はGenkoVuePluginをNuxtプラグインから使います。

React版との違い

部品名とDOMは@genko-me/reactと同じですが、Vueにはサーバーコンポーネントがないため、取得と表示が2つに分かれます。ドキュメントを読み替えるときは次の2点に注意してください。

  • 取得するフィールドは自分で並べます。 React版は子要素を調べて必要なフィールドを判断しますが、Vueにその手段はありません。fetchGenkoList({ fields: ["title", "publishedAt"] })のように明示します。省略すると絞り込まず全フィールドを取得します。
  • ページ送りの設定はListClientに渡します。 mode・paramの実際の制御はListClientのpagination-optionsが持ちます。Paginationに書くmodeはラベル側の指定で、両方を揃える必要があります。

向いている用途

  • ブログ・お知らせ・事例など、サーバーで描いて配信するページ。
  • 記事一覧にページ送りが必要なサイト。server/apiのルートを1本足すと、2ページ目以降もAPIキーを出さずに取得できます。
  • 編集者が保存した下書きを、公開前に本番と同じページで確認したいサイト。

向いていないもの

  • ssr: falseのSPAモード。 取得がブラウザ側に移り、APIキーの置き場がなくなります。その構成はVueを参照してください。
  • nuxt generateだけで完結させたい構成。 ページ送りはserver/apiのルートを必要とします。ビルド時に全ページを出力する場合は、ページ送りを使わないか、その1本だけを動かせるホスティングを選んでください。
  • ページの<script setup>から直接取得すること。 @genko-me/vue/serverをページでimportすると、サーバー専用のコードがブラウザ用バンドルに入ります。取得はserver/で行います。
  • コンテンツの書き込み。 配信APIは読み取り専用です。記事の作成・更新は管理画面から行います。

次に読む

最終更新: 2026年9月17日

目次

使うパッケージReact版との違い向いている用途向いていないもの次に読む