Vue + Django: Combining Django Templates and Vue Single File Components without compromise

Oct 16 12:00 PM EDT :calendar: to 12:25 pm

About This Talk

There is a common misconception that Django’s template-based views and “heavyweight” JavaScript frameworks such as Vue cannot co-exist without considerable compromise; that we are forced to choose between the two. For example, we may use Django Rest Framework as back-end while writing a JavaScript SPA front-end, making it difficult to utilize Django templates where convenient. Or we may use JavaScript frameworks from Django templates using browser <script> includes, but then lost is much of the tooling, testability, and ecosystem of the modern build-based JavaScript framework. This dilemma leads many Django developers to choose lighter-weight no-build Javascript frameworks as a means to add dynamic user experience.

However, there is no need for compromise. Vue can, surprisingly easily, be mingled directly into Django templates, allowing us to mix-and-match these two front-end technologies as we wish, without sacrificing the strengths of either.

This talk will explain a unique new approach to integrating Vue 3 within Django Templates. Starting with a minimal Django project, I will demonstrate the addition of Vue components into a templated app, harmoniously combining both front-end frameworks. We will explore topics such as information passing from Django to Vue, Vite configuration and tooling, persistent state management with Pinia, and resources to jumpstart your own project.


    Photo of Mike Hoolehan

    Mike Hoolehan (he/him)

    Mike is a software developer living in Tallinn, Estonia. Although his list of former hobbies is expansive and every-growing, his love of software is constant and 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.