環境

• PHP
• MySQL

初期設定

READMEにそって、まずはリポジトリをCloneします。

$ git clone git@github.com:ayasamind/cake_webpacker.git

次にcomposer installをします。
composerが入っていない方は公式サイトからダウンロードしてください。

$ php composer.phar install

次にyarnを使ってpackage.jsonにあらかじめ記述してあるモジュールをインストールします。

こちらも、yarnがない方はダウンロードをしてください。

https://yarnpkg.com/lang/ja/

yarnpkg.com

$ yarn

最後に、src/Template/Layouts/default.ctpファイルの中に以下の一文を追加します。
ドメイン(localhost)は自分のCakePHPを置いているドメインに変更します。

<script src='http://localhost:3000/bundle.js'></script>

動かしてみる

webpackのサーバーを立ち上げます。

$ yarn run dev

コンパイルがされ、プロジェクトのディレクトリにブラウザからアクセスすると

Vueの初期画面が表示されます。

これで一応、SPAが完成しています。

ページを追加してみる

まずはフロント側からつくります。

src/Javascript/router/index.js

import HelloWorld from '../components/HelloWorld.vue';
 //　追記
 import SamplePage from '../pages/SamplePage.vue';
 
 const router = new VueRouter({
 // mode: 'history',
 routes: [
   {
     path: '/',
     component: HelloWorld
   },
   // 追記
   {
     path: '/sample/,
     component: SamplePage
   }
 ]
}) 
export default router

src/Javascript/pages/SamplePage.vue　を新規作成

<template>
 <div>
   <h2>サンプルページ</h2>
   <p></p>
 </div>
</template>
 
<script>
 export default {
 
 }
</script>

これで、/sampleにアクセスすると

ページが追加されていることが確認できます。

PHPからデータを受け取る

せっかくCakePHP3とVue2を両立させたので、データの受け渡しをしてみます。

既にCakePHP側には以下のようなHomeControllerのindexアクションがあります。

public function index()
 {
   $home = "Hello Cake Webpacker!";
 
   $this->set(['data' => $home, '_serialize' => 'data']);
 }

このデータをVue側で受け取ります。

先ほど作成した、SamplePage.vueを変更していきます。

<template>
 <div>
   <h2>サンプルページ</h2>
   <p>{{ comment }}</p>
 </div>
</template>
 
<script>
 import axios from 'axios'
 export default {
   data() {
     return {
       comment: ''
     }
   },
 created() {
   this.getData();
 },
 methods: {
   async getData() {
     const data = await axios.get('home/index.json')
       .catch(err => console.log(err))
     this.comment = data.data;
   }
 }
}
</script>

axiosを利用してPHPからデータを受け取ります。

以下のような画面が表示されます。

これでPHPからVueへのデータの受け渡しができました。

以上、CakePHP3とVue2を簡単に両立させてみました。

お時間あれば是非試してみてください！