[Django]-Vue.js in Django Templates

by

10👍

✅

As the per docs of Vue v1.0 say:

// ES6 template string style
Vue.config.delimiters = ['${', '}']

So, in your example change to:

$(function() {
    Vue.config.delimiters = ['[[', ']]'];
    var app = new Vue({
        el: '#myApp',
        data: {
            message: 'Hello, world!'
        }
    });
});

It is strongly recomended, though, to use the new version of Vue (version 2) in order to be up-to-date!

👤nik_m

4👍

Django has builtin functionality to skip interpreting template using verbatim

<div id="myApp">
    {% verbatim %}
       {{ value_from_vue }}
    {% endverbatim %}
    {{ value_from_django }}
</div>

<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            value_from_vue: "hello from vue"
        }
    })
</script>

Anything goes inside verbatim won’t be interpreted by the django template engine. This functionality also useful for other (if any) Javascript libraries when they don’t provide delimiter option.

However, if configuring delimiter is preferred:

for latest Vue (version 2+), put the config inside the vue instance just like in the question.

$(function() {
    var app = new Vue({
        el: '#myApp',
        delimiters: ['[[', ']]'],
        data: {
            message: 'Hello, world!'
        }
    });
});

for Version 1 of Vue, use just like the answer by nik_m

Vue.config.delimiters = ['[[', ']]'];
👤izzulmakin

Leave a comment