WordPressとVueでREST APIを使って最新記事とコメントを取得する

Vue3とWordPressを組み合わせて最新の記事やコメントを取得する入門的な内容です。

環境の準備

• Vue3系のセットアップ
• TypeScriptの採用
• AxiosでのHTTPリクエスト

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

interface Post {
  id: number;
  title: { rendered: string };
}

interface Comment {
  id: number;
  author_name: string;
  date: string;
  content: { rendered: string };
}

const posts = ref<Post[]>([]);
const comments = ref<Comment[]>([]);

onMounted(async () => {
  try {
    const postsResponse = await axios.get('/wp-json/wp/v2/posts');
    posts.value = postsResponse.data;
    
    const commentsResponse = await axios.get('/wp-json/wp/v2/comments');
    comments.value = commentsResponse.data;
  } catch (error) {
    console.error(error);
  }
});
</script>

<template>
  <div class="index">
    <h1>最新の投稿</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title.rendered }}
      </li>
    </ul>
    <h2>最新のコメント</h2>
    <ul>
      <li v-for="comment in comments" :key="comment.id">
        <p>{{ comment.author_name }} ({{ comment.date }})</p>
        <p>{{ comment.content.rendered }}</p>
      </li>
    </ul>
  </div>
</template>

リクエストが404になる場合はパーマリンクを疑いましょう。 freelance-engineer.hatenablog.jp