Last updated 15 days ago by Mike Hoolehandjango
However, typical solutions to integrating Django and Vue forgo much of the strengths of one lieu of the other. For example, a common approach is to use Django Rest Framework as back-end and 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.
I recently started a project where I wanted to reserve the option to utilize both Django Templates and Vue, without compromising either. Most of my site’s pages were relatively static listings of back-end data with limited interactivity, exactly what Django excels at it in only a few lines of code. But I had small number of pages that contained areas of more complex data-driven interactivity, Vue’s forté. Could I find a way to rely on Django templates for my simpler pages while enriching parts of pages with Vue, all in a easy-to-manage configuration?
Could I have the best of both front-ends?
Of course! This article would have been spectacularly inessential otherwise.
The key pieces in this solution are the
In the remaining sections of this article, I’ll illustrate the modification of a basic template-driven Django app to utilize Vue components authored as Single File Components. I omit the steps of building a simple Django site as it is well-documented already, but if you would like a simplified starting point, you can use this article’s example repo at tag example_start.
For the purposes of this article, I assume you have two working templates into which you would like to add separate Vue components.