こんにちは、Fusic二年目吉野です。

今回は、CakePHP3とVue2でSPAを構築するまでを紹介します。

Vueの環境を構築するのは、vue-cliが非常に便利ですが、vue-cliだとフロント側のみのコード生成になります。

また、PHPのフレームワークとしては、Laravelは公式でVueを採用しているため、使用するまでのハードルが低いですが、CakePHP3はハードルが高いです。

CakePHPとVueをうまく組み合わせるには、webpackやBabelなど、たくさんのJSプラグインの知識が必要です。

今回は、手軽にCakePHP3+Vue2の環境を作ることができる、Cake_Webpacker　を使って、CakePHP3+Vue2の環境を作っていきたいと思います。

環境

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/

$ yarn

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

動かしてみる

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　を新規作成

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

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

PHPからデータを受け取る

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

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

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

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

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

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

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

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

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

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

Fusic Tech Blog

CakePHP3 + Vue2で簡単SPAをつくる

環境