Integrate Vue.js with CakePHP framework

CakePHP is a great framework to build traditional web applications rapidly. But every application needs interactivity and often that has to be done without loading or refreshing the full webpage. That's where JavaScript comes into picture, and there's lots of JS libraries and frameworks like Vue, React and many more which makes it ease of adding interactivity to your application. Also over past few years single page applications(or commonly referred as SPA ) are gaining the popularity.

That being said Vue or React can make building front-end easy, it can not replace the back-end. So it is essential to integrate both front-end and back-end properly so that we can have best of both worlds.

While integrating modern JS frameworks(Vue or React) with CakePHP is really easy, there's no guide or resource which tells exactly how it should be done. I often see people posting questions on how or what is the best practice to integrate Vue.js with CakePHP and tell that there's no resource which can help them.

So here I am trying to answer their question on how to integrate Vue.js with CakePHP. While I'm focusing on Vue.js on front-end the general concept/idea would be same for React or Svelte or any other front-end frameworks.

Installation

1. First let's create a fresh CakePHP project via composer:

composer create-project --prefer-dist cakephp/app:~4.0 cakephp-vuejs-app

2. Now install AssetMix plugin:

composer require ishanvyas22/asset-mix

Why this plugin? Well, this plugin helps us integrate Laravel Mix with CakePHP framework with ease. This plugin will take the all the hard work for us so that we can focus on building application with Vue.js and CakePHP.

Configuration

1. Load plugin using below command:

bin/cake plugin load AssetMix

2. Generate Vue.js scaffoldings:

bin/cake asset_mix generate --dir=resources

Read about generate commands for AssetMix plugin at https://github.com/ishanvyas22/asset-mix#generate-command

3. Install front-end dependencies:

Using npm:

npm install

or

Using yarn:

yarn install

4. Compile your assets:

   For development:

   npm run dev
   

5. Add below line in src/View/AppView.php file's initialize() method:

$this->loadHelper('AssetMix.AssetMix');

That's it! Now we are ready to use Vue.js with CakePHP.

Once you've loaded AssetMix helper, you now has access to script(), css(), etc. methods which you can use to call your compiled assets.

To include app.js file you've just compiled, add below code into your layout templates/layout/default.php file:

$this->AssetMix->script('app')

Now create a view file templates/Pages/greet.php to call the Vue component to see it in action. Add below code inside that file:

<div id="app">
    <h1>Greetings</h1>
    <app-greet></app-greet>
</div>

Now run bin/cake server command to quickly start development server and go to http://localhost:8765/pages/greet URL to see the result. You will see "Hello world!" text printed into the page.

Now to change the text, edit resources/js/components/AppGreet.vue file:

<template>
  <div>Welcome to CakePHP + Vue.js world!</div>
</template>

Run npm run dev to compile the assets or you can also run npm run watch which will watch for the changes inside resources directory and will compile the assets automatically. Now reload the http://localhost:8765/pages/greet page again to see the result.

That's it! You have successfully integrated Vue.js in CakePHP application. You can file full source code of this post at https://github.com/ishanvyas22/cakephp-vuejs-skeleton.

I hope this post helps you. In case you've any questions/suggestions feel free to add comment.

Resources

• CakePHP installation: https://book.cakephp.org/4/en/installation.html
• Laravel Mix: https://laravel-mix.com/docs/6.0/what-is-mix
• AssetMix plugin: https://github.com/ishanvyas22/asset-mix
• Article full source code: https://github.com/ishanvyas22/cakephp-vuejs-skeleton
• CakePHP Vue.js SPA: https://github.com/ishanvyas22/cakephpvue-spa