Vue.js - Double curly braces(Mustache) syntax not working/rendering to page

Question

i just started learning vue.js

i don't know why but the double curly braces syntax isn't rendering, but when i use the v-text directive, it does work. here is my code:

html:

<!DOCTYPE html>
<html>
  <head>
    {% include '_depend.html' %}

    <title></title>
  </head>
  <body>

    {% if signed_in %}
      {% include 'nav-signed-in.html' %}
    {% else %}
      {% include 'nav-signed-out.html' %}
    {% endif %}

    <!--  -->

    <div id="welcome-vue" class="container container-top-space">
      <div class="row">
        <div class="col s12">
          <div class="card-panel">
            <p class="text-center">{{ header_msg }}</p>
          </div>
        </div>
      </div>
    </div>


    <script src="/vault/js/vue.min.js"></script>
    <script src="/vault/js/vues/welcome-ctrl.js"></script>

    <!--  -->

    {% include 'footer.html' %}

    {% include '_events.html' %}

  </body>
</html>

js:

const welcomeVue = new Vue({
  el: '#welcome-vue',
  data: {
    header_msg: 'sample message'
  }
});

Why won't the double curly brace work? There are no errors in the console and when I log the Vue instance, everything is there, including the $el property.

What are you using to render the `{% ... %}` includes? Most likely whatever is rendering that is trying to render the double curly braces as well — sliptype, Mar 06 '18 at 17:04
Yes, omitting that `{%...%}` thing, it works seamlessly here: https://jsbin.com/qoqisijumu/edit?html,js,output — vahdet, Mar 06 '18 at 17:06
ah i see, i'll try to fix it. The page is being render by the nunjucks library(like python jinja) in my express.js app on the backend. Thanks! — ryanwaite28, Mar 06 '18 at 17:13
Thanks! it is fixed now; using this property - delimiters: ['((', '))'], — ryanwaite28, Mar 06 '18 at 17:18

score 3 · Accepted Answer · edited Feb 05 '19 at 14:57

3

You have conflict with twig template

{% verbatim %}
    new Vue({
        el: '.container',
        data: {
            foo: 'Hello world.'
        }
    });
{% endverbatim %}

use Vue instance like this. Conflict on Template of Twig and Vue.js You can find more about your question in this post.

edited Feb 05 '19 at 14:57

Paul Mark

161
3
17

answered Mar 06 '18 at 17:06

Beso Kakulia

556
4
13

ah i see, i'll try to fix it. The page is being render by the nunjucks library(like python jinja) in my express.js app on the backend. Thanks! – ryanwaite28 Mar 06 '18 at 17:13
1

Thanks! it is fixed now; using this property - delimiters: ['((', '))'], – ryanwaite28 Mar 06 '18 at 17:18

Vue.js - Double curly braces(Mustache) syntax not working/rendering to page

1 Answers1