Hi there, i use Cakephp since many years and today i was having a look at the new version 4.
In versione 3 I used Vue Js as a simple library just including the js and in any Cakephp .ctp file
a simple code like this was rendered:
Now I tried the same on Cakephp4 and it seems that the {{ message }} is not parsed, it just prints as it is.
I do not know if this is due to the fact that Cake template changed extension form .ctp to .php but this is really annoying.
Fabio
I don’t know Vue or know details of its use, but I approximated your code with this to see if js was behaving as expected on .php templates:
And the alert message appears.
There are clearly hidden details regarding Vue’s behavior that you haven’t included in your question if that code worked in the past. I would expect these js fragments to execute in the order they are loaded (hence my reversal of the order) unless I do something to control and direct their execution.
How would that work in your example code?
Hi, thanks for the reply.
The code i posted works on CakePhp 3 just as it looks in my screenshot. I’ve been using this approach in all my project since more than a year.
The js script part goes at the end because it looks for an element with id #app and then the the script instanciates a Vue component (let app = new Vue) and attaches it to that div (el: ‘#app’) creating a virtual dom.
F.
Hi, i just tried with a fresh new CakePhp 3.8 installation.
I created a welcome.ctp under Templates/Pages with this code.
That’s what I see in the Browser
If I do the same thing in CakePhp 4 it prints
so it does not work. I hope I explained clear now.
F.
Well, I can only assume you are actually replicating line 32 from v3.8 default.ctp in your v4 default.php?
Also, since js runs on the user’s browser, I’m not clear on how the rendering process would have any impact. As long as the exact same html code is output in v3.8 and v4, the browsers would have no knowledge of any change.
You can confirm that the output from each cake version is identical and rule the rendering out as a problem.
Have you checked the HTML output between the 2 versions ? I think it’s more about Cake adding some attributes to script tag and Vue is not fully loaded as vm init script is interpreted. You can also simply check console for errors.
Obviously, there’s no way that server side PHP can infer browser script behavior, except through HTML output.
If loading order is the issue, simply defer scripts in the right order to fix it. Even if it is not, it’s always a good idea anyway 
Hi, sorry for the late reply to your quick answers. I re-tried to do the same thing on a brand new cakephp 4 project and it works fine as in v3.8. So I do not really know what happened in the previous project.
I can confirm now that Vue as a library renders fine in Cakephp4. Thanks to all for the support.
F.
