2026年5月21日

WordPressのNuxt.jsフロントエンドと連携する方法

カスタマイズ

はじめに

この記事では、WordPressとNuxt.jsを連携させる方法について詳しく紹介します。これにより、WordPressの後方で静的サイトジェネレーターとして機能する高品質なVue.jsアプリケーションを作成することができます。

Nuxt.jsはVue.jsのフレームワークであり、SPA（Single Page Application）やSSR（Server Side Rendering）、Static Site Generationなどのモードをサポートしています。これにより、WordPressと組み合わせて使用することでパフォーマンスが向上し、SEO対策も強化されます。

症状・背景

このテーマが必要になる主な場面:

WordPressサイトのフロントエンドをVue.jsで書きたい場合
SPAやSSRを活用したい場合
サイトのパフォーマンス向上を目指している場合
ユーザー体験を改善したい場合

手順・設定方法

ステップ1: Nuxt.jsプロジェクトのセットアップ

# WordPressとの連携用にNuxt.jsプロジェクトを作成します。
npx create-nuxt-app wp-nuxtjs-frontend-connect

# Vue.jsとnpmをインストールする前に、事前に以下のモジュールをインストールしてください。
npm install axios vue-router vuex --save

ステップ2: WordPress APIの設定

# WordPress REST APIを利用するためにpackage.jsonに"wp-api"という名前の依存関係を追加します。
npm install wp-api-json --save

# config/nuxt.config.jsファイルを開き、REST APIのエンドポイントとアクセスキーを指定します。
export WORDPRESS_API_URL='https://your-wordpress-site.com/wp-json';
export WP_CONSUMER_KEY='ck_your_consumer_key_here';

module.exports = {
  //...
  axios: { baseURL: process.env.WORDPRESS_API_URL },
};

ステップ3: データの取得と表示

# store/index.jsでWordPressデータを取得するアクションを作成します。
import axios from 'axios'

export const actions = {
  async fetchPosts({ commit }) {
    try {
      let { data } = await axios.get(`${process.env.WORDPRESS_API_URL}/posts?_embed`);
      commit('SET_POSTS', data);
    } catch (e) {
      console.error(e);
    }
  },
};

# components/PostList.vueでデータを表示します。
<template>
  <div v-for="post in posts" :key="post.id">
    <h2>{{ post.title.rendered }}</h2>
    <p>{{ post.excerpt.rendered | stripShortcodes | truncate(150) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  async mounted() {
    await this.$store.dispatch('fetchPosts');
    this.posts = this.$store.state.posts;
  }
}
</script>

ステップ4: フロントエンドのデプロイと監視

# npm run generateコマンドを実行してNuxt.jsアプリケーションをビルドし、静的ファイルとして出力します。
npm run generate

# 生成されたpublicディレクトリ内のファイルは、WordPressのテーマフォルダ内に移動させます。

注意事項

WordPress REST APIが有効になっていることを確認してください。
CORS（Cross-Origin Resource Sharing）設定を適切に行う必要があります。
データのセキュアな取り扱いと適切な認証が必要です。
静的ファイルのバージョニングやCDN利用による高速化が推奨されます。

まとめ

1. API連携: WordPress REST APIを利用してデータを取得します。

2. Vue.js利用: Vue.jsフレームワークを使用してSPAを作成します。

3. ビルドとデプロイ: Nuxt.jsプロジェクトを静的ファイルとしてビルドし、WordPressテーマにインポートします。

4. パフォーマンス最適化: キャッシュやCDNによる高速化を行います。

5. セキュリティ対策: データの取り扱いや認証などを適切に行います。

Post Views: 19