API と Vue.js でつくる記事一覧

一覧は API、詳細はサーバサイド

記事一覧ページは動的な取得・絞り込みに向くため、GET /_api/posts を Vue.js から呼び出して描画します。一方、記事詳細ページは SEO や OGP・構造化データを初期 HTML に含める必要があるため、サーバサイドで生成します。

一覧取得の流れ

1. Vue の mounted で Api.get('/posts') を呼ぶ
2. 統一エンベロープ { data, meta } を受け取る
3. カード（アイキャッチ・タイトル・概要・カテゴリ・タグ）を描画する

共通クライアント _assets/js/common/api.js が、ベース URL 解決とエラー整形を担います。