Zenn
📝

CAKEPHP3にVue.jsを導入する

2020/11/27に公開
PHP
Vue.js
tech

以下の構成で設計を行う機会があった
バックエンド：cakephp3
フロント：HTML CSS JS

JSでフロントをつくるにあたって非同期処理を行いたいとのことだったので、興味のあったVue.jsを導入してみることにした。

導入方法

  1. JSファイルのダウンロード
    公式サイトから、jsファイルをダウンロードする。

  2. プロジェクト名/src/webroot/jsディレクトリに１でダウンロードしたファイルを配置

  3. src/Template/Layout/default.ctpのheader内に以下の記述を記載

default.ctp
 <?= $this->Html->script('vue.js') ?>

これですべてのページにてVue.jsを読み込むようになった。

例

実際に実装できているかを確認する。

Vue.jsでHelloWorldと表示させる

  • 適当なディレクトリを開く
 vim src/Template/TESTS/TEST.ctp
  • Vue.jsの記法で記述する。
TEST.ctp
<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

問題なくVue.jsを利用できた。

cakephp3とVue.jsを連携させる

cakephp3のフレームワークとVue.jsを関連付けてみる。

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
	message: "<?= h($post->message)?>"
  }
})
</script>

Vue.js内にCakephp3のコマンドで出力される文字列のは、クォーテーションマークで囲む必要があるので注意。

おわりに

Vue.jsのメリットはセッション管理が容易なところだと思うが、それ以外にも可読性の高さや、UIフレームワークの豊富さが挙げられる。ときには、フロントをVue.jsで作っても良さそうだ。

Discussion