CakeDC | Build a Single Page Application Using CakePHP and InertiaJS

Acampanario

March 6, 2024 · 7 min read · 9,233 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].

Back to all articles