DjangoCon US 2023

Vue + Django: Combining Django Templates and Vue Single File Components without compromise
2023-10-16 , Grand Ballroom II-III

Django and Vue both have unique front-end strengths. Django’s context-driven template views offer rapid development of pages directly from back-end model content. Vue’s modern reactive components provide powerful tools for building complex UIs within the rich Javascript ecosystem.

Do we have to choose one or the other, or is there a way to combine both front-end frameworks in a single project without compromising their strengths?

This talk will demonstrate step-by-step how to intermingle Vue SFCs within Django Templates, such that targeted areas can be enriched with Vue while retaining the flexibility and convenience of Django Templates in the remainder.


Typical solutions to integrating Django and Vue forgo much of the strengths of one in lieu of the other. For example, a common approach is to use Django Rest Framework as back-end while writing the entire front-end in Vue, making it difficult to utilize Django templates in places it could be expedient. A second approach is to use Vue within Django templates using browser <script> includes, but then lost is the ability to use Vue's Single File Components (SFCs).

This talk will explain a unique approach to intermingling Django Templates and Vue that preserves the strengths of both.

Starting with a minimal Django project, I will demonstrate the addition of Vue components into a final working app that combines both front-end frameworks. Topics such as information passing from Django to Vue, maintaining Vuex state between pages, and deferred loading of Vue resources will also be explored.

Mike is a software developer living in Tallinn, Estonia. Although his list of former hobbies is expansive and every-growing, his love of of software is constant keeps him curious and enthusiastic after 20 years of professional software development across numerous languages and frameworks. Currently, Mike is following his bliss with Django, Flutter, bike-touring, camping, and tabletop gaming.