Nuxtのサンプル実装を読む

主なファイル

nuxt/
├── app/pages/posts/index.vue
├── app/pages/posts/[slug].vue
├── app/components/PostCard.vue
├── server/api/posts/index.get.ts
├── server/api/posts/[slug].get.ts
├── server/utils/wordpress.ts
└── shared/types/post.ts

server/utils/wordpress.ts がWordPressへの通信とレスポンスの整理を担当し、ページはNuxtの /api/posts を呼びます。型は shared/types/post.ts でサーバーと画面から共有します。

実例サイトで確認するページ

• http://localhost:3001 — 接続状態と最新投稿
• http://localhost:3001/posts — 投稿一覧
• http://localhost:3001/posts/投稿スラッグ — 投稿詳細

WordPress管理画面で投稿を公開すると、NuxtがREST APIから情報を取得します。静的公開環境ではデプロイ時に投稿ページを生成するため、公開後の投稿を反映するにはGitHub Actionsから再デプロイします。