Skip to content

Instantly share code, notes, and snippets.

@jdecode
Last active June 11, 2020 21:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jdecode/3dd9a6edd6c0411756681c0035b76c41 to your computer and use it in GitHub Desktop.
Save jdecode/3dd9a6edd6c0411756681c0035b76c41 to your computer and use it in GitHub Desktop.
CakePHP and Vue in single repo

Edit: The original title of this gist was "Vue from scratch" but soon (actually from the very initial stage) it took the road of "CakePHP and Vue as monorepo". This still contains almost all the Vue specific items as listed below (the 18-point list is not changed, although some of the items are skipped or have notes added in comments). This is a fairly large piece of text + screenshots (to read and see) but not really time consuming to implement (that's what I tell myself, anyway). Happy reading.... caking and vueing... cakueing perhaps!

Thanks to github.com/pankajvashisht-ucreate for the list

Following is the original 18-point list shared by Pankaj Vashisht for someone who is starting in Vue.js from scratch

  1. Node installation
  2. Initialization of package.json file
  3. Basic understanding of script key in package.json file
  4. Install vuejs
  5. Vue file initialization with vue instance
  6. Understanding of vue.use methods
  7. Vue router
  8. Vue lifecycle (Hooks)
  9. Design Pattern
  10. How to create component in the vuejs
  11. Vue html Attributes (Very Important)
  12. Two way binding
  13. Data pass parent to child and child to parent (Props)
  14. Understanding the concept of $emit in the vue js
  15. Vue js slot
  16. Vue js Object keys in details
  17. VueStore for data sharing
  18. How deploy the Vue js App
@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

The layout file templates/layout/vue-layout.php is modified at 2 places:

  1. At the very top CakePHP's Router class is included
    <?php
    use Cake\Routing\Router;
    
    ?>
    
  2. Right before the body tag is closed, 2 script tags are introduced loading the app.js and chunk-vendors.js files from the compiled files created somewhere above (probably still compiling in the background) when the command npm run watch was executed.
    <script type="text/javascript" defer src="<?= Router::url('/') ?>webroot/vue/js/chunk-vendors.js"></script>
    <script type="text/javascript" defer src="<?= Router::url('/') ?>webroot/vue/js/app.js"></script>
    

Light/Normal mode home page now looks like this (ignore the missing logo, the file path is the issue, this layout will be updated, and the logo would be moved to somewhere else):
Screenshot from 2020-06-12 02-00-45

Removed the text from the "view" file templates/Pages/vue.php

Screenshot from 2020-06-12 02-03-39

Now the page looks more clean (the bottom-right logo is of CakePHP debugKit - for debugging in development environments, ignore that as well):

Screenshot from 2020-06-12 02-04-53

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Git add > commit > push
Working CakePHP and Vue setup (mono-repo)...

Next would be actual "DAPIER" being developed, and deployed... stay tuned... or not... It's almost 2 AM - the NIGHT

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

To make things easier while designing the UI (HTML/CSS) I use TailwindCSS framework, so I am adding some instructions to set that up as well. If you do not use it - then please explain "WHY THE HELL NOT?"
npm install tailwindcss or npm i tailwindcss

Screenshot from 2020-06-12 02-18-49

Screenshot from 2020-06-12 02-19-22

A new npm script is added called tailwind and the script is tailwind build src/tailwind.css -o webroot/css/style-tw.css
What this command is doing/saying is
"Hey tailwind,
build from the source file at src/tailwind.css
and generate output (-o) css file
at webroot/css/style-tw.css"

The source file at src/tailwind.css contains following code (copied directly from tailwind's official documentation):

@tailwind base;
@tailwind components;
@tailwind utilities;

The package.json file now looks like this:
Screenshot from 2020-06-12 02-22-52

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Git add > commit > push
This will not have any screenshots unless something particular interesting or problematic happens
If someone faces any issue, please ask question here in the comments or add an issue at the repo

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

Run npm run tailwind and this will generate the output file at webroot/css/style-tw.css
Include this CSS file in the templates/layout/vue-layout.php file in the head section.

Screenshot from 2020-06-12 02-35-08

git status shows 2 files - vue-layout because it now has the CSS file, and the CSS file itself (untracked). Do git add > commit > push cycle.

Screenshot from 2020-06-12 02-35-35

@jdecode
Copy link
Author

jdecode commented Jun 11, 2020

The final homepage's structure looks slightly different because tailwind's CSS is now loaded as well
Screenshot from 2020-06-12 02-37-48

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment