WordPress に Vue.js を スモールスタートで入れてみる その2

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その2

基本構造 WordPress の各テンプレートファイルからVue.jsを呼び込む

トップページの場合、 homeGallery.vue には Vue ( <template> と <script> ) を書いていく感じ。

▼ app.js

import Vue from 'vue'

// import文を使ってSassファイルを読み込む。（これがないと.scss => .cssへコンパイルされない）
import './../scss/app.scss';

// Variable
import {
  APP_ID
} from './variable';

// Vue Component
import HomeGallery from './component/homeGallery';

// Home
window.renderHome = function () {
  new Vue({
    el: `#${APP_ID}`,
    components: {
      HomeGallery
    }
  });
}

▼ front-page.php

<?php get_header(); ?>
  <home-gallery></home-gallery>
<?php get_footer(); ?>

▼ footer.php

<script type='text/javascript' src='/_assets/js/bundle.js'></script>
<?php if ( is_front_page() ) : ?>
  <!-- トップページ -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      renderHome()
    })
  </script>
<?php endif; ?>

定数用の.jsファイル

js/variable.js では定数の管理を行って各.vueにexportする

const APP_ID = `app`;

// サイト情報
const SITE_INFO = {
  name: 'siteName',
  url: `https://siteUrl.com`
}

// APIのベースURL
const API_POST_URL = `${SITE_INFO.url}/wp-json/wp/v2`;
const API_OPTION_URL = `${SITE_INFO.url}/wp-json/acf/v3/options/options/`;

export {
  APP_ID,
  SITE_INFO,
  API_POST_URL,
  API_OPTION_URL
};

全体構成編、ちょっと長くなったのでここまで。
次回はもう少し細かい内容になる予定です。