@daftspunk Hi, I'm trying to use VueJS with October but it seems like the mustache syntax used by Vue is not playing well with Twig.

I'm not sure how to do this but I'm prepending the '@' symbol for my vue stuff (just as you would in case of Laravel's blade) and expecting it to use Vue instead of twig for rendering however, it keeps throwing tons of JS console errors and doesn't work at all.

I'm putting down my Vue oriented code in pages like so:

@{{ some.vue.variable }} 

JS console errors:

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(...) is not a function

Any help will be much appreciated.

Thanks.

Hi,

please check this: http://octobercms.com/docs/markup/tag-verbatim

This syntax is the right for you.

{% verbatim %}
<p>Hello {{ name }}, this is parsed by AngularJS</p>
{% endverbatim %}

Regards Crazymodder

@Crazymodder - Thanks a ton mate!! Works like a charm. Don't know how I missed reading that in the documentation.

Do you have any example of vue in conjunction with octobercms online ?

That might be also a solution : https://vuejs.org/api/#delimiters just change the delimiter from {{}} to eg: [[]]

@daslicht - yes I got it working on a project that never actually went live. {{ verbatim }} works perfectly fine. Let me know if you wish to see the code. I'll put it up.

I am curious how it feels :) I would love to try it to get an impression.

@daslicht here you go man: https://github.com/pratyushpundir/OctoberCMSAndVueJS

Not the best example but this project was dropped mid-way. I just put it up on github - hit me up if you have any questions.

Last updated 7 years ago

Thank you !