and Vue Andrés Campanario - About me Andrés started programming creating the first job opportunities website in his university (URV) in 1998. After working in some companies he decided to become a freelance programmer using CakePHP as a base tool for his customers and integrating all types of third party services and efficient systems tools. He also collaborates with an NGO in the Raval neighborhood in Barcelona, which focuses on promoting education, sports, combating marginalisation and exclusion of young immigrants. Currently is a Senior Developer and DevOps Engineer at CakeDC.
three tags in the project repository • tag v0.1 is how create a base works a single page application app, sending and printing values generated on back to front • tag v0.2 is how send a request to back and how back response it with json data to front (avoiding page reload) • tag v0.3 is how to generate necessary templates to bake an a complete CRUD system form a sample database model In each slide at the bottom left you can see in which tag we are in case you want to consult the code Summary https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.0 How to use Inertia.js to create an SPA with CakePHP and Vue
to create single-page, fully rendered client-side applications, without the need to use a specific API for data exchange. Inertia has no client-side routing. Inertia isn't a framework. It can be considered a data exchange interface. How to use Inertia.js to create an SPA with CakePHP and Vue Front Back
and Vue Starting point (kick off) https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP • Install basic CakePHP 4 and run it on Docker ◦ $> composer create-project --prefer-dist cakephp/app:~4.4 spa-with-cakephp-and-vue ◦ $> docker-compose up -d • or clone this repository from my github account (don’t forget to choose the corresponding tag) ◦ $> gitclone [email protected]:ACampanario/Spa-CRUD-with-Vue-and-CakePHP.git ◦ $> docker-compose up -d ◦ $> docker exec --user application -w \/application -it spa-inertia-cakephp-vue composer install ◦ $> git checkout tags/v0.x Tag v0.0
root. The most important dependencies that we will develop are: ◦ inertia ▪ @inertiajs/inertia ▪ @inertiajs/inertia-vue ◦ vue (v2.6) ◦ portal-vue (to render components) ◦ vue-meta (metadata manager) ◦ vue-loader (loader for webpack) ◦ laravel-mix (to compile and minify files) • Install required modules $> npm install https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.1 How to use Inertia.js to create an SPA with CakePHP and Vue
and Vue Create Vue App (app.js) https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Line 14 Get the "app" element of the DOM in which our application will be rendered. Line 22 Convert the content obtained from the DOM element dataset to JSON and pass it as properties to the component. Line 23 Import vue component Dashboard.vue Tag v0.1
in the App, It’s a simple view that prints values received. Tag v0.1 We create dashboard function on PagesController.php and set an array to $page variable with two positions. Also add specific route on Config/routes.php How to use Inertia.js to create an SPA with CakePHP and Vue
and Vue InertiaView https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP InertiaView class is responsible for setting the $page variable (which contains all shown variables) and other things like url or component name to let Vue know which component to load. Tag v0.1
and Vue InertiaHelper https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Next, we create a helper to render a div tag in which we will place variables that our CakePHP will pass as properties to the component that Vue will generate. We put this helper on layout.php and replace <?= $this->fetch('content') ?> with <?= $this->Inertia->make($page, 'app', ''); ?> Also, we need to add app.js in the HEAD tag <script src="/js/app.js" defer="defer"></script> Tag v0.1
run dev” on the project root and clear the browser cache. Tag v0.1 We can see the values that were put on the dashboard’s page function (see slide 9). How to use Inertia.js to create an SPA with CakePHP and Vue
Inertia library to create navigable links. • Update Dashboard.vue • Add function whoWeAre on PagesController.php • Update app.js to resolve components by name Tag v0.2 How to use Inertia.js to create an SPA with CakePHP and Vue
the type of call received in order to perform some actions. If it's an Inertia call, we should add detectors. For example to get the received data, or to decide which view to use Tag v0.2 How to use Inertia.js to create an SPA with CakePHP and Vue
function to return serialized data How to use Inertia.js to create an SPA with CakePHP and Vue InertiaJsonView https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Update InertiaResponseTrait to add InertiaJsonView if the request is “inertia”. Tag v0.2
Execute “npm run dev” on the project root and clear the browser cache. We can now change page without browser reload and see different values. How to use Inertia.js to create an SPA with CakePHP and Vue
pages, categories and tags. Update InertiaResponseTrait and add the flash messages and csrf token. Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
vue2-editor components and install it executing “npm install” Create Layout.vue as an horizontal menu in resources/Components, and update existing components Dashboard and WhoWeAre Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
for the controller and templates twig files inside the templates directory. You can see the base tree structure at vendor/cakephp/bake We replicate the following templates in our structure: • controller (Controller/) • controller action templates (element/Controller/) • those of the controller action views (Template/) Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
and Vue Controller.twig and CRUD functions https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 In the Controller.twig file we need to add InertiaResponseTrait so it is used in all baked Controllers. Also in element/Controller/ we will overwrite the CRUD functions with these changes: • Check schema to parse data in “timestampfractional” columns using FrozenDate Class • set $errors var on template • modify association BelongsToMany to call find(‘all’) instead of find(‘list’)
controller’s function We need to generate urls for pagination and pass directly to the template, this is for the Vue component to create the pagination links with a simple loop containing the InertiaLink tag provided by the Inertia library. How to use Inertia.js to create an SPA with CakePHP and Vue
do an Index.vue component. In comparison with original index.php generated we will highlight: • all links are replaced to use InertiaLink provided by Inertia library • on the headers table links we need to apply our function changeDirection to sort elements and alternate direction on runtime • we need to check columnData.type. If it’s a date, we apply moment.format • we need to add csrfToken to postLink Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
do an Add.vue and Edit.vue components. We will highlight: • Added token, errors and flash as props • Generate one prop for each BelongsToMany • Include Vue Components ◦ VueEditor ◦ Datepicker ◦ Multiselect Template (form.twig) - properties https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
use associations BelongsToMany and field variables. Template (form.twig) - methods https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 On the mounted() component function, we fill the form values. if it’s an edit action we also fill BelongsToMany values in the form How to use Inertia.js to create an SPA with CakePHP and Vue
use the action post of $inertia provided by @inertiajs/inertia-vue. This generates a request with data from the form to an url and adds csrfToken inside it. Template (form.twig) - submit https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
bin/cake bake model Categories $> bin/cake bake model Tags $> bin/cake bake model Pages Bake controller as normal $> bin/cake bake controller Categories $> bin/cake bake controller Tags $> bin/cake bake controller Pages Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
and Vue Baking templates https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Before baking templates, we need to create a command that extends \Bake\Command\TemplateCommand, for example VueTemplateCommand.php. We only need to modify two things: • on getTemplatePath function, we change the target templates directory to the resources directory • on bake function, we change the files extension to .vue Then bake all $> bin/cake bake vue_template Categories $> bin/cake bake vue_template Tags $> bin/cake bake vue_template Pages Tag v0.3
and Vue That’s all folks! … for tag v0.3 https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 Execute “npm run dev” on the project root and clear the browser cache. We can add, edit, view, delete and list any entity type without changing the page.
much for attending my workshop. I hope that you liked it and that it will be useful to you someday in the future. if you have any question or visit Barcelona feel free to email me at [email protected] And special thanks to CakeDC’s team for their support and help. Farewell and thanks https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP How to use Inertia.js to create an SPA with CakePHP and Vue
amandagoff
tammyeverts
soysaucechin
lara
addyosmani
greggifford
jct
reverentgeek
aleyda
codingconduct
morganepeng
eitanlees
pauljervisheath
