CakeDC Blog

TIPS, INSIGHTS AND THE LATEST FROM THE EXPERTS BEHIND CAKEPHP

Build a Single Page Application Using CakePHP and InertiaJS

Written by Acampanario on March 06, 2024
8255 VIEWS

The Inertia Plugin allows a CakePHP application to integrate Vue 3 components in the front end, without the need to write a specific API for data transfer.

This is done  by adding a Middleware and view classes that facilitate the conversion of objects and data in JSON almost automatically, as well as the direct load in the components.

The plugin is thought of as a base to extend and use your app’s specific controllers and views from.

Just because  it works out of the box doesn't mean it is intended to be used exactly as is,  but this will  provide you a good kick start.

See the repo here: https://github.com/CakeDC/cakephp-inertia

Requirements

  • CakePHP 4.5

  • PHP >= 8.1

  • NodeJS 18.9 (only for build Vue Components, not required on running site)

 

Step 1: Create a basic CakePHP install

 

For this example I will use a basic installation using Docker and Composer. 

First you must create project from cakephp/app

 

$> composer create-project --prefer-dist cakephp/app:~4.5 inertia_app

$> cd inertia_app

$> cp config/app_local.example.php config/app_local.php

 

Then write an docker-compose.yml file as:

version: '3'

services:

  psql13:

    image: postgres:13

    container_name: inertia-app-postgres13

    volumes:

      - ./tmp/data/inertia-postgres13__db:/var/lib/postgresql:delegated

    environment:

      - POSTGRES_USER=my_app

      - POSTGRES_PASSWORD=secret

      - POSTGRES_DB=my_app

      - PGUSER=my_app

      - PGDATABASE=my_app

      - PGPASSWORD=secret

    ports:

      - '7432:5432'

 

  cakephp:

    image: webdevops/php-nginx:8.1

    container_name: inertia-app-cakephp

    working_dir: /application

    volumes:

      - ./:/application:cached

      - ~/.ssh:/home/application/.ssh:ro

    environment:

      - WEB_DOCUMENT_ROOT=/application/webroot

      - DATABASE_URL=postgres://my_app:secret@inertia-app-postgres13:5432/my_app

    ports:

      - "9099:80"

 

Launch the container and go to http://localhost:9099/

 

$> docker-compose up -d

 

Step 2: Add CakePHP Inertia plugin

 

Install plugin via command line:

$> composer require cakedc/cakephp-inertia

 

Once installed enable it in src/Application.php, adding at the bottom of bootstrap function:

$this->addPlugin('CakeDC/Inertia');

 

or by command line:

$> bin/cake plugin load CakeDC/Inertia


 

Step 3: Create Vue App and install it

 

To create Vue App type in command line:

$> bin/cake create_vue_app

 

This command create in the resources directory the files that use our App, also create in root directory the files:

  • webpack.mix.js

  • package.json

 

Then in root directory install with NPM:

$> npm install


 

Step 4: Create simple SPA (Single Page Application)

 

Create a single page called dashboard that show values sets in a controller action

We need to first add InertiaResponseTrait

 

use CakeDC\Inertia\Traits\InertiaResponseTrait;

 

class PagesController extends AppController

{

 

 use InertiaResponseTrait;

 

 ...

 ...

 

}

 

Create a new function that would look like this:

public function dashboard()

{

  //set default php layout of plugin that use vue

  $this->viewBuilder()->setTheme('CakeDC/Inertia');

 

  $page = [

      'text' => 'hello world 1',

      'other' => 'hello world 2',

  ];

  $this->set(compact('page'));

}

 

in config/routes.php uncomment lines to catch all routes:

$builder->connect('/{controller}', ['action' => 'index']);

$builder->connect('/{controller}/{action}/*', []);

and comment line:

$builder->connect('/pages/*', 'Pages::display');

 

Then create file resources/js/Components/Pages/Dashboard.vue that would look like this:

<script setup>

import Layout from '../Layout'

import { Head } from '@inertiajs/vue3'

import {onMounted} from "vue";

 

defineProps({

    csrfToken: String,

    flash: Array,

    page: Array,

})

 

 

onMounted(() => {

    console.log('Component Dashboard onMounted hook called')

})

</script>

 

<template>

    <Layout>

        <Head title="Welcome" />

        <h1>Welcome</h1>

        <p>{{page.text}}</p>

        <p>{{page.other}}</p>

    </Layout>

</template>

 

On root directory execute:

$> npm run dev

 

IMPORTANT: Whenever you modify the .vue templates, you must run this script.

Go to http://localhost:9099/pages/dashboard to see that Dashboard Vue Component prints values assignments on Dashboard CakePHP function.


 

 

 

Step 5: Bake CRUD system

 

For this example, we use sql file on config/sql/example/postgresql.pgsql

 

That creates a database with the relations

 

 

Once the database has been created, bake models and controllers as normal using:

$> bin/cake bake model Pages --theme CakeDC/Inertia

$> bin/cake bake controller Pages --theme CakeDC/Inertia

$> bin/cake bake model Tags --theme CakeDC/Inertia

$> bin/cake bake controller Tags --theme CakeDC/Inertia

$> bin/cake bake model Categories --theme CakeDC/Inertia

$> bin/cake bake controller Categories --theme CakeDC/Inertia

 

and bake templates using vue_template instead of template as:

$> bin/cake bake vue_template Pages --theme CakeDC/Inertia

$> bin/cake bake vue_template Tags --theme CakeDC/Inertia

$> bin/cake bake vue_template Categories --theme CakeDC/Inertia

 

Again run:

$> npm run dev

 

You can the results from this example by going to http://localhost:9099/pages/index

 

In the following recording you can see how to add, edit and delete a record without reloading the page at any time.

 

Step 6: Using prefix and adding a navigation menu

 

Add route to prefix Admin on config/routes.php

$builder->prefix('admin', function (RouteBuilder $builder) {

   $builder->fallbacks(DashedRoute::class);

});

 

To generate controllers and template with a prefix use --prefix option of bake command as:

$> bin/cake bake controller Pages --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake controller Tags --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake controller Categories --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake vue_template Pages --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake vue_template Tags --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake vue_template Categories --prefix Admin --theme CakeDC/Inertia

 

You can add a horizontal menu to navigate through controllers

 

Edit resources/Components/Layout.vue and put inside header tag links as:

<header>

   <Link as="button" href="/pages/index" class="button shadow radius right small">Pages</Link>

   <Link as="button" href="/tags/index" class="button shadow radius right small">Tags</Link>

   <Link as="button" href="/categories/index" class="button shadow radius right small">Categories</Link>

</header>

 

Again run:

$> npm run dev

 

You can see the results from this  example by going to http://localhost:9099/admin/pages/index

 

In the following recording you can see how to add, edit and delete a record without reloading the page at any time and navigate through pages, tags and categories.

 

Hopefully this example will make your experience easier! Let us know: [email protected].

Latest articles

51 Views

Goodbye to 2025!

Well bakers… another advent calendar is coming to an end. I hope you enjoyed all of the topics covered each day. We are also closing the year with so much gratitude.    2025 was the 20th year of CakePHP, can you believe it? We had an amazing year with our team, the community and the CakePHP core. It was great connecting with those who attended CakeFest in Madrid, and we hope to have the opportunity to see more of you in 2026.    I cannot let the year end without getting a little sentimental. There is no better way to say it… THANK YOU. Thank you to the team who worked so hard, the core team that keeps pumping out releases, and most of all … thank you to our clients that trust us with their projects. CakeDC is successful because of the strong relationships we build with our network, and we hope to continue working with all of you for many years.    There are a lot of great things still to come in year 21! Could 2026 will be bringing us CakePHP 6?! Considering 2 is rhe legal drinking age in the US, maybe CakePHP 6 should be beer cake? Delicious. Stay tuned to find out.    Before I go, I am leaving you with something special. A note from Larry!   As we close out this year, I just want to say thank you from the bottom of my heart. Twenty years ago, CakePHP started as a simple idea shared by a few of us who wanted to make building on the web easier and more enjoyable. Seeing how far it has come, and more importantly, seeing how many lives and careers it has impacted, is something I never take for granted. I am deeply grateful for our team, the core contributors, the community, and our clients who continue to believe in what we do. You are the reason CakePHP and CakeDC are still here, still growing, and still relevant after two decades. Here is to what we have built together, and to what is still ahead. Thank you for being part of this journey. Larry

Written by Amanda on December 24, 2025

59 Views

Pagination of multiple queries in CakePHP

Pagination of multiple queries in CakePHP

A less typical use case for pagination in an appication is the need to paginate multiples queries. In CakePHP you can achieve this with pagination scopes.

Users list

Lest use as an example a simple users list. // src/Controller/UsersController.php class UsersController extends AppController { protected array $paginate = [ 'limit' => 25, ]; public function index() { // Default model pagination $this->set('users', $this->paginate($this->Users)); } } // templates/Users/index.php <h2><?= __('Users list') ?>/h2> <table> <thead> <tr> <th><?= $this->Paginator->sort('name', __('Name')) ?></th> <th><?= $this->Paginator->sort('email', __('Email')) ?></th> <th><?= $this->Paginator->sort('active', __('Active')) ?></th> </tr> </thead> <tbody> <?php foreach ($users as $user): ?> <tr> <td><?= h($user->name) ?></td> <td><?= h($user->email) ?></td> <td><?= $user->active ? 'Yes' : 'No' ?></td> </tr> <?php endforeach; ?> </tbody> </table> <?= $this->Paginator->counter() ?> <?= $this->Paginator->prev('« Previous') ?> <?= $this->Paginator->numbers() ?> <?= $this->Paginator->next('Next »') ?>

Pagination of multiple queries

Now, we want to display two paginated tables, one with the active users and the other with the inactive ones. // src/Controller/UsersController.php class UsersController extends AppController { protected array $paginate = [ 'Users' => [ 'scope' => 'active_users', 'limit' => 25, ], 'InactiveUsers' => [ 'scope' => 'inactive_users', 'limit' => 10, ], ]; public function index() { $activeUsers = $this->paginate( $this->Users->find()->where(['active' => true]), [scope: 'active_users'] ); // Load an additional table object with the custom alias set in the paginate property $inactiveUsersTable = $this->fetchTable('InactiveUsers', [ 'className' => \App\Model\Table\UsersTable::class, 'table' => 'users', 'entityClass' => 'App\Model\Entity\User', ]); $inactiveUsers = $this->paginate( $inactiveUsersTable->find()->where(['active' => false]), [scope: 'inactive_users'] ); $this->set(compact('users', 'inactiveUsers')); } } // templates/Users/index.php <?php // call `setPaginated` first with the results to be displayed next, so the paginator use the correct scope for the links $this->Paginator->setPaginated($users); ?> <h2><?= __('Active Users') ?>/h2> <table> <thead> <tr> <th><?= $this->Paginator->sort('name', __('Name')) ?></th> <th><?= $this->Paginator->sort('email', __('Email')) ?></th> <th><?= $this->Paginator->sort('active', __('Active')) ?></th> </tr> </thead> <tbody> <?php foreach ($users as $user): ?> <tr> <td><?= h($user->name) ?></td> <td><?= h($user->email) ?></td> <td><?= $user->active ? 'Yes' : 'No' ?></td> </tr> <?php endforeach; ?> </tbody> </table> <?= $this->Paginator->counter() ?> <?= $this->Paginator->prev('« Previous') ?> <?= $this->Paginator->numbers() ?> <?= $this->Paginator->next('Next »') ?> <?php // call `setPaginated` first with the results to be displayed next, so the paginator use the correct scope for the links $this->Paginator->setPaginated($inactiveUsers); ?> <h2><?= __('Inactive Users') ?>/h2> <table> <thead> <tr> <th><?= $this->Paginator->sort('name', __('Name')) ?></th> <th><?= $this->Paginator->sort('email', __('Email')) ?></th> <th><?= $this->Paginator->sort('active', __('Active')) ?></th> </tr> </thead> <tbody> <?php foreach ($inactiveUsers as $inactiveUser): ?> <tr> <td><?= h($inactiveUser->name) ?></td> <td><?= h($inactiveUser->email) ?></td> <td><?= $inactiveUser->active ? 'Yes' : 'No' ?></td> </tr> <?php endforeach; ?> </tbody> </table> <?= $this->Paginator->counter() ?> <?= $this->Paginator->prev('« Previous') ?> <?= $this->Paginator->numbers() ?> <?= $this->Paginator->next('Next »') ?> And with this you have two paginated tables in the same request.

Written by Rperez on December 23, 2025

129 Views

Clean DI in CakePHP 5.3: Say Goodbye to fetchTable()

This article is part of the CakeDC Advent Calendar 2025 (December 23rd, 2025)

Introduction: The Death of the "Hidden" Dependency

For years, accessing data in CakePHP meant "grabbing" it from the global state. Whether using TableRegistry::getTableLocator()->get() or the LocatorAwareTrait’s $this->fetchTable(), your classes reached out to a locator to find what they needed. While convenient, this created hidden dependencies. A class constructor might look empty, despite the class being secretly reliant on multiple database tables. This made unit testing cumbersome, forcing you to stub the global TableLocator just to inject a mock. CakePHP 5.3 changes the game with Inversion of Control. With the framework currently in its Release Candidate (RC) stage and a stable release expected soon, now is the perfect time to explore these architectural improvements. By using the new TableContainer as a delegate for your PSR-11 container, tables can now be automatically injected directly into your constructors. This shift to explicit dependencies makes your code cleaner, fully type-hinted, and ready for modern testing standards. The Old Way (Hidden Dependency): public function execute() { $users = $this->fetchTable('Users'); // Where did this come from? } The 5.3 Way (Explicit Dependency): public function __construct(protected UsersTable $users) {} public function execute() { $this->users->find(); // Explicit and testable. }

Enabling the Delegate

Open src/Application.php and update the services() method by delegating table resolution to the TableContainer. // src/Application.php use Cake\ORM\TableContainer; public function services(ContainerInterface $container): void { // Register the TableContainer as a delegate $container->delegate(new TableContainer()); }

How it works under the hood

When you type-hint a class ending in Table (e.g., UsersTable), the main PSR-11 container doesn't initially know how to instantiate it. Because you've registered a delegate, it passes the request to the TableContainer, which then:
  1. Validates: It verifies the class name and ensures it is a subclass of \Cake\ORM\Table.
  2. Locates: It uses the TableLocator to fetch the correct instance (handling all the usual CakePHP ORM configuration behind the scenes).
  3. Resolves: It returns the fully configured Table object back to the main container to be injected.
Note: The naming convention is strict. The TableContainer specifically looks for the Table suffix. If you have a custom class that extends the base Table class but is named UsersRepository, the delegate will skip it, and the container will fail to resolve the dependency.

Practical Example: Cleaner Services

Now, your domain services no longer need to know about the LocatorAwareTrait. They simply ask for what they need. namespace App\Service; use App\Model\Table\UsersTable; class UserManagerService { // No more TableRegistry::get() or $this->fetchTable() public function __construct( protected UsersTable $users ) {} public function activateUser(int $id): void { $user = $this->users->get($id); // ... logic } } Next, open src/Application.php and update the services() method by delegating table resolution to the TableContainer. // src/Application.php use App\Model\Table\UsersTable; use App\Service\UserManagerService; use Cake\ORM\TableContainer; public function services(ContainerInterface $container): void { // Register the TableContainer as a delegate $container->delegate(new TableContainer()); // Register your service with the table as constructor argument $container ->add(UserManagerService::class) ->addArgument(UsersTable::class); }

Why this is a game changer for Testing

Because the table is injected via the constructor, you can now swap it for a mock effortlessly in your test suite without touching the global state of the application. $mockUsers = $this->createMock(UsersTable::class); $service = new UserManagerService($mockUsers); // Pure injection!

Conclusion: Small Change, Big Impact

At first glance, adding a single line to your Application::services() method might seem like a minor update. However, TableContainer represents a significant shift in how we approach CakePHP architecture. By delegating table resolution to the container, we gain:
  • True Type-Safety: Your IDE and static analysis tools now recognize the exact Table class being used. This is a massive win for PHPStan users—no more "Call to an undefined method" errors or messy @var docblock workarounds just to prove to your CI that a method exists.
  • Zero-Effort Mocking: Testing a service no longer requires manipulating the global TableRegistry state. Simply pass a mock object into the constructor and move on.
  • Standardization: Your CakePHP code now aligns with modern PHP practices found in any PSR-compliant ecosystem, making your application more maintainable and easier for new developers to understand.
If you plan to upgrade to CakePHP 5.3 upon its release, this is one of the easiest wins for your codebase. It’s time to stop fetching your tables and start receiving them. This article is part of the CakeDC Advent Calendar 2025 (December 23rd, 2025)

Written by Arusinowski on December 23, 2025

We Bake with CakePHP