Vue + Django — Best of Both Frontends

Last updated 139 days ago by Mike Hoolehan

django

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.

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.

Django Webpack Loader and the Vue Multi-Page App

The key pieces in this solution are the django-webpack-loader Django app and Vue's ability to support Multi-Page Apps. By combining these tools, one can build a standard template-driven Django application that incorporates one or more individual webpack bundles in Django views. Each of these bundles is a separate Vue "page" that can be built using all the standard Vue/Javascript/Webpack tooling.

Adapting a Django project to use Vue

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.

Read full Article