# Using VueJs as library worked in Cakephp 3 but not in Cakephp 4

**URL:** <https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888>\
**Category:** Need Help\
**Created:** [May 30, 2020, 4:39pm UTC](https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888 "2020-05-30T16:39:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![butre](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/butre/32/1282_2.png) [@butre](https://discourse.cakephp.org/u/butre)\
**Post date:** [May 30, 2020, 4:39pm UTC](https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888/1 "2020-05-30T16:39:28Z")

</div>

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:

 ![Screenshot 2020-05-30 at 18.40.39](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/9/99ffc902e65d137d885262d21209c9c8a9067272.jpeg)

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

---

<div class="post-metadata">

**Author:** ![dreamingmind](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/dreamingmind/32/1857_2.png) [@dreamingmind](https://discourse.cakephp.org/u/dreamingmind)\
**Post date:** [May 30, 2020, 5:15pm UTC](https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888/2 "2020-05-30T17:15:01Z")

</div>

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:

 ![Screen Shot 2020-05-30 at 10.08.53 AM](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/f/fc4f29b82c993614d0a202ce77995d7df587e59c.png)

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?

---

<div class="post-metadata">

**Author:** ![butre](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/butre/32/1282_2.png) [@butre](https://discourse.cakephp.org/u/butre)\
**Post date:** [May 30, 2020, 5:37pm UTC](https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888/3 "2020-05-30T17:37:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![butre](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/butre/32/1282_2.png) [@butre](https://discourse.cakephp.org/u/butre)\
**Post date:** [May 30, 2020, 5:53pm UTC](https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888/4 "2020-05-30T17:53:47Z")

</div>

Hi, i just tried with a fresh new CakePhp 3.8 installation.

1. I just quick included Vue library through CDN

 ![Screenshot 2020-05-30 at 19.48.55](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/9/9472a5377df840af641c8e1ae6bab43a21cda67c.jpeg)

1. I created a welcome.ctp under Templates/Pages with this code.  

2. That’s what I see in the Browser  

If I do the same thing in CakePhp 4 it prints

 ![Screenshot 2020-05-30 at 19.52.57](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/3/339d54326574545ce10d7a853d6fbc215d0418ba.jpeg)

so it does not work. I hope I explained clear now.

F.

---

<div class="post-metadata">

**Author:** ![dreamingmind](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/dreamingmind/32/1857_2.png) [@dreamingmind](https://discourse.cakephp.org/u/dreamingmind)\
**Post date:** [May 30, 2020, 6:30pm UTC](https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888/5 "2020-05-30T18:30:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![liqueurdetoile](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/liqueurdetoile/32/1111_2.png) [@liqueurdetoile](https://discourse.cakephp.org/u/liqueurdetoile)\
**Post date:** [June 3, 2020, 3:02am UTC](https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888/6 "2020-06-03T03:02:55Z")

</div>

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](https://stackoverflow.com/questions/50535718/i-is-undefined-bootstrap-4/50535989#50535989) to fix it. Even if it is not, it’s always a good idea anyway 🙂

---

<div class="post-metadata">

**Author:** ![butre](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/butre/32/1282_2.png) [@butre](https://discourse.cakephp.org/u/butre)\
**Post date:** [June 3, 2020, 5:57am UTC](https://discourse.cakephp.org/t/using-vuejs-as-library-worked-in-cakephp-3-but-not-in-cakephp-4/7888/7 "2020-06-03T05:57:15Z")

</div>

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.