Vue.js In Django Templates

I am trying to use Vue.js in Django templates. One such template is the following: {% load static %}

Solution 1:

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 = newVue({
        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!

Solution 2:

Django has builtin functionality to skip interpreting template using verbatim

<divid="myApp">
    {% verbatim %}
       {{ value_from_vue }}
    {% endverbatim %}
    {{ value_from_django }}
</div><script>var myApp = newVue({
        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 = newVue({
        el: '#myApp',
        delimiters: ['[[', ']]'],
        data: {
            message: 'Hello, world!'
        }
    });
});

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

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