Vue

Nuxtを使わないVueアプリ——Viteで作ったSPA、Vue Routerを使う構成——からもgenko.meのコンテンツを表示できます。配信APIはRESTなので、@genko-me/sdkをブラウザから呼び、取得した値を@genko-me/vueの表示部品に渡します。

Vueの表示部品（ListClient・ListItem・EntryProvider・ViewItemなど）はサーバーコンポーネントではないため、この対象でもそのまま使えます。Next.jsを使わないReactと違い、取得から表示までを別々に書く必要はありません。取得だけが自分のコードになります。

Nuxtを使っている場合はNuxtを参照してください。

使うパッケージ

この対象で使えないもの。

• @genko-me/vue/server（fetchGenkoList・fetchGenkoEntry・loadGenkoPage）。サーバー専用で、APIキーを扱う前提の関数です。取得は@genko-me/sdkのclient.blog.list() / getOrNull()を直接呼びます。
• ページ送りの署名付きトークン。あの仕組みは「APIキーをブラウザに渡さないため」のものです。この対象ではキー自体がバンドルに入っているので、ListClientのloadPageから@genko-me/sdkを直接呼んで新しいページを取得すれば十分です。

正直な話：APIキーとSEO

ブラウザから直接呼ぶ構成では、APIキーは秘密にできません。 バンドルに埋め込まれた値も、通信時のX-API-KEYヘッダーも、開発者ツールから読めます。読み取り専用のキーとはいえ、そのキーで許可したAPIは誰でも読めるものとして扱ってください。

• APIキーは「選択したAPIのみ」で公開して差し支えないAPIだけに絞る。
• 有効期間を短くし、定期的に交換する。
• 隠したいデータがあるなら、自分のサーバーで取得してJSONを返す構成にする。

検索エンジン向けには不利です。 初期HTMLは空の<div id="app">で、本文はJavaScriptの実行後に入ります。OGPのタイトル・説明もサーバーから返せません。検索流入やSNSシェアが重要なページなら、SSRするフレームワーク（Nuxt、Next.js、SvelteKit、Astro）を選ぶほうが確実です。

向いている用途

• ログイン後の画面や社内ツールなど、検索流入を前提としない画面にお知らせ・ヘルプを出す。
• すでにあるVue SPAの一部分だけをgenko.meで差し替える。
• 管理する人がコンテンツを更新したら、再ビルドなしで即座に反映したい画面。

向いていないもの

• 検索エンジンやSNSのプレビューを重視する公開ページ。
• APIキーを見せたくない構成。
• 保存済み下書きのプレビュー通知やnoindexの付与は自分で実装します（PreviewNotice部品自体は使えますが、出し分けはコード側の判断です）。
• Webhookの受信。受け取るサーバーがないため、実践の方法をとります。

次に読む

• 導入：インストールから一覧・詳細の表示まで
• 実践：ページ送り・下書きプレビュー・更新の反映
• コンテンツ取得：取得メソッドの一覧
• 配信API：SDKを使わずHTTPで取得する