Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Template not rendered in Vue served by Django [duplicate]

I have a Django app for backend, which renders templates with Vue as frontend. My view code in django has the following parts:

# thing/views.py
def index(request):
    template = loader.get_template('thing/index.html')
    return HttpResponse(template.render({}, request))

# thing/urls.py
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
]

# some other files that complete the project are not included

In index.html there is the following code:

<div id="app">
    <p v-if="quotaRemaining > -1">
        Remaining: {{ quotaRemaining }}
    </p>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            quotaRemaining: 42,
        },
    });
</script>

The only thing that is being rendered when I access this page is:

Remaining:

While I would expect it to be

Remaining: 42

Why is my Vue template not being rendered correctly when served by Django? How do I make it work?

like image 223
Yury Fedorov Avatar asked Aug 31 '25 17:08

Yury Fedorov


1 Answers

Django has its own template language, which has a concept of variables. It treats {{ quotaRemaining }} as a Django variable, and processes it even before it gets to the frontend (to Vue). There are at least a couple of solutions.

  1. Surround Vue related code with {% verbatim %} tag:

Stops the template engine from rendering the contents of this block tag. A common use is to allow a JavaScript template layer that collides with Django’s syntax.

    {% verbatim %}
    <p v-if="quotaRemaining > -1">
        Remaining: {{ quotaRemaining }}
    </p>
    {% endverbatim %}
  1. Customize Vue delimiters and use these delimiters in your client code:

     <!-- template code -->
     <p v-if="quotaRemaining > -1">
         Remaining: ${ quotaRemaining }
     </p>
    
     // js code
     const app = new Vue({
         el: '#app',
         delimiters: ['${', '}'],
         data: {
             quotaRemaining: 42,
         },
     });
    
like image 81
Yury Fedorov Avatar answered Sep 02 '25 06:09

Yury Fedorov