Vue.js と WP REST API を使って、WordPressで作られている他サイトの投稿データを自サイトに表示する方法のご紹介をします。 まず、Vue.js を読み込みます。 テーマの footer.php に次のように記述します。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

すべてのhtml読み込みが終わってからVue.jsを読み込む必要があるので、footer部のhtmlの記述が終わった後の場所に書きましょう。
2つ目の axios というのはAPIからデータを取得したり送信したりするためのHTTPクライアントです。
単純に、APIを使うために必要、と思ってください。

さて、上のように Vue.js 関係のCDN参照宣言ができたら、そのまま続けて footer.php に次のように記述します。

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            posts: []
        },
        created() {
            axios.get('https://sample.com/wp-json/wp/v2/posts/').then(response => {
                this.posts= response.data;
            })
        },
    });
</script>

これで、https://sample.com の記事データをすべて取得できました。
あとは、取得した記事データを表示する処理を、表示したいページのテンプレートPHPに記述すれば完成です。

<div id="app">
  <div v-for="post in posts">
    <h3>{{ post.title.rendered }}</h3>
    <div v-html = "post.content.rendered"></div>
  </div>
</div>

※ 「id=”app”」の部分は、scriptに書いた「el: “#app”」と合わせましょう。
※　v-html は取得したデータをhtmlとしてはめ込みますので、XSS脆弱性を考えて、信頼できるサイトからのデータ取得だけにするようにしましょう。
　
これで表示したいページに https://sample.com の記事のタイトル＆コンテンツのセットが記事数分表示されるはずです。
　
　
なお全記事でなく、特定の記事だけ取得したい場合は、「記事ID」を指定してあげればできます。

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            posts: []
        },
        created() {
            axios.get('https://sample.com/wp-json/wp/v2/posts/記事ID').then(response => {
                this.posts= response.data;
            })
        },
    });
</script>

もちろん1記事だけ取得なら、テンプレート側の記述のfor文でまわす処理のところはなくなりますね。

<div id="app">
  <div>
    <h3>{{ posts.title.rendered }}</h3>
    <div v-html = "posts.content.rendered"></div>
  </div>
</div>

関連記事:

管理画面を使わず、Vue.js と WP REST API を使って、Webページから直接記事データ等を更新する WP REST API でアドバンストカスタムフィールドの値を取得する WordPress製 売上管理システム （専用テーマ販売）の事例 WordPressカスタマイズ上級編その２（WebAPI） functions.phpでカスタム投稿とカスタムタクソノミーを作成する方法 イベントカレンダーをつくる 一覧ページの記事の並び順を複数のカスタムフィールドの値で制御する 記事の表示順をカスタムフィールドの値で制御する 親ページがある投稿のIDのリストを取得する メモリエラーの解決 ページ遷移しない投稿一覧のページネーションを、jQueryで手軽に実装する ページネーションのある投稿一覧ページで、最新の投稿１件だけレイアウトを変える 固定ページにページネーション機能を持たせる トップページに設定した固定ページでページネーションする カスタムフィールドを含む記事レコードの一括インポート アドバンストカスタムフィールドの複数選択チェックボックスの値をCSVインポートする ウィジェットをショートコードにして任意の場所で表示する カテゴリページの投稿一覧の取得条件をカテゴリごとに変える 人気記事を取得・表示するプラグイン「WordPress Popular Posts」のカスタマイズ 言語設定が「英語」のブラウザからのアクセスの時、英語ページに強制的にリダイレクトさせる プラグインなしで多言語サイト（英語サイトなど）の作り方 【頻出】よく使う便利なテンプレートタグ一覧【WordPress入門】 簡単な例で始めるVue3でTypeScript入門 ECサイト構築例 Nuxt.js + Vue.js 予約システム クラウドソーシング オンラインスクール Vue.jsによるChat・サンプル LP構築例 Nuxt.js + Vue.js WordPressカスタマイズ上級編その１（関数）