Using VueJS Alongside Django

This is great, thanks for writing it!

I have recently stepped out of the seemingly never-ending spiral of using React/Vue for everything frontend, and also discovered Django along the way.

For building prototypes, Django is the fastest framework I've ever used. After building out prototypes in Django I've come to a realization that at most 10% of my websites need to be truly reactive to user interaction without page reload. Turns out when I dropped this requirement when building something, I can actually finish the projects I start. And also turns out for the end-user, they don't even notice page reloads for most sites.

I have a Django application which I wanted to connect to from a ReactJS front end.

However I did not want to lose all the business logic and work that had gone into the views, models, forms and fields along with all the validation and authentication logic etc.

So I wrote some React code that grabs Django's HTML forms and dynamically turns all the HTML fields into React components. To do updates I just submit ordinary form data from React. This means I just create ordinary Django application forms and views and it works from the React app.

There's pros and cons to this approach. The code that does the HTML form to React form logic is more complex than I would like. On the other hand it's all constrained to a fairly tight area of React. Then there is the huge benefit of being able to make zero modifications to the Django back end. On the con side, it does feel like a bit of a frankenstein application. But its a small price to pay for not having to convert entire Django apps into API's.

I actually have lots of mini React apps at the front end that are loaded onto ordinary Django HTML template.

I totally understand people's preference to use Django templates wherever possible, and only sprinkle in more frontend focused stuff when needed, but personally, I would rather just write the whole frontend in React or Vue.

This is probably partly due to the fact I find working with django rest framework serializers / views to be much nicer than django forms / views.

I think what puts most people off is the default requirement to go all-in and create an SPA with global state management and client-side managed routing, but this isn't actually necessary.

I have found incorporating Django with https://inertiajs.com to be a pretty solid alternative. I can write the whole frontend in React, and the backend in Django rest framework, but everything is still page based, so I don't require redux or any other kind of global state, just use the inertia utils to make page transitions.

NextJS is another alternative. To talk to a (django) API you need to go through getStaticProps and getServerSideProps which, depending on the location of your API server, can be a little slow, but you get pre-rendered HTML and page based routing so again no global state management required.

I really love Django and Wagtail but I just can’t stop writing Go(lang) code, it’s just so addictive. It’s a pity there aren’t any WSGI servers written in Go that Would allow you to intermix Go and Python code seamlessly. Kind of like what Roadrunner does for php [0]

  [0] https://github.com/spiral/roadrunner

Nice article. People sometimes dismiss Django but it’s been around for a while and is certainly the fastest framework for building out new ideas that I’ve seen. It’s my goto framework for prototyping.

I find too many teams are so focused on using the latest fancy frameworks that they spend way more effort to build something using “new stuff” that could have been done in half or a quarter of the time with something like Django. For most projects, simple that’s built and works beats fancy that’s still being built.

Vue and Django (with Rest Framework) are a great combo and I've used them together to build two reasonably sized apps recently.

I don't know if I'm doing it wrong but I still use Gulp to compile everything. I use Django for the routing and intermix a tiny bit of dynamic server-side data (like login user or breadcrumbs) in the Django templates before they go to Vue.

Doing it like this I skip all the component complexity (I do use mixins) and can build front end with simple tools I understand. Possibly I could avoid a little repetition by using components, but the increase in abstraction I don't think would be worth it.

This is fast to develop. I've seen less complex single page apps using React or whatever take what seems like a lot more effort. But like I say, maybe I'm not doing it right. It works really well though.

> This post aims to show that you can start to use Vue with your Django projects immediately without any sophisticated setup that will take hours to complete. Therefore, we will use the simplest method to use Vue.js: Including it via a <script> tag.

Nice. Yeah, sometimes it's easier to get started this way without investing a day in getting webpack working...

When the time comes and you need webpack, then this package has been known to help the integration between the frontend build system (webpack) and django's static file serving functions: https://github.com/owais/django-webpack-loader

Vue and Django work very well together. However I'd recommend completely decoupling the frontend and backend source code - and avoid using django templates entirely. Instead expose REST endpoints using django rest framework

Been using Django alongside VueJS as well. It's a very efficient way of building your web app.

That being said, mostly it's just a couple of pages that need VueJS such as e.g. a dashboard and such (depending on your app of course!).

If you use standard Django with Turbolinks it will give you the SPA "feel" that you require.

I wrote my Clash Royale streamer tracker (http://playedwith.io) using this exact combination.

Backend: - Django Rest Framework - Django Background Tasks (great for running cron like jobs, and simpler than celery)

Frontend: - Vue SPA

All of this runs on docker-compose, with nginx used to route traffic to either the backend API or frontend files that were built using Vue-Cli.

Very happy with this stack. It's not super advanced, but it is easy to get up and running and quick at prototyping.

This is a great read. I had considered using React with a Django side project a while back, but it just seemed like too much added complexity for the gain I would get in a small app. The approach in this article though looks great.

This is similar to what I've done recently with a project of mine using Django + Elm (https://github.com/ereadingtool/ereadingtool).

I wrote an adapter of sorts, between Django and the frontend, which is a Django base template specifically for the pages loading compiled Elm/JavaScript, that turns Django view context data into a JavaScript data structure that gets fed into the Elm code. In this way, the frontend JavaScript is initialized and ready to go without more page fetches. If I need to pass some extra data to it, I can simply add it in to get_context_data().

I like the idea of re-using everything Django has to offer but also being able to pass a few parameters into Elm and have it handle the view side. Where I get into trouble is when Elm and Django code both have to agree on data formats and schemas, but this is more my fault for not strongly abstracting the API.

One of the reasons I have ended up choosing Vue over React as my preferred front end framework is exactly that it can integrate at these different levels. If you want to write a full on SPA it will do that. But if you want to have a 99% traditional server rendered app, and you just want to sprinkle a component here or there, it does that in an extremely light weight manner.

But the most likely scenario? You have both: new apps being developed as SPAs and some older ones being maintained and the nice thing is it is very non-intrusive share Vue components between them by dropping a script tag into the legacy page.

So it's both legacy compatible, current-tech compatible, and my prediction is, better positioned for forward compatibilty with whatever comes next for the same reasons.

Slightly off topic, but I really like how this site uses the left and right whitespace on larger screens.

One of my minor frutstrations around having a large 4K monitor is that a lot of websites (especially blogs) force the width of the text to be very small and I end up with massive whitespace on the sides. Although this blog still has a small width for the main text, the sides are not wasted!

I've been using Django with Vue sprinkled in on https://candid.work and it's been a pleasure. Using Vue for reactive stuff and then modifying form fields after the changes so Django can still do the updates has been a pretty great experience so far.

I feel the only way these two will play nicely is swapping Django for a DRF approach. Vanilla JS could be, and perhaps should be, used in place of Vue for small use cases. There's no need for the extra abstraction when AJAX could work.

Interesting article! Another approach is serving webpack bundles from Django views. This allows you to take advantage of the entire node ecosystem and build process (for better or worse) while still utilizing Django authentication, etc. Writing single file Vue components (with hot reloading) and bundling them is definitely more enjoyable than writing static files for Django. If performance is a concern, you can always optimize with webpack in this approach, whereas optimization may be harder in methods such as the one this article suggests

I recently also coded my first Django/Vue app. Here's what I really liked: Have all business logic on the server. The user clicks a button? Tie this to a function on the server that receives the client state from Vue and responds with the new state. This way, all business logic is in very simple Python functions that essentially operate on a JSON dictionary.

The above approach only needs very little generic wiring. The caveat is that it probably only works when there is little client data, which was the case for me.

I've been building a web app with Django (+ DRF, Next.js and React) recently again for the first time in two years and it sure is a joy.

My biggest gripe with it is that it leaves the business logic side of things totally up to the developer. While many like it this way, I'd find a cookbook of sorts helpful with reference implementations on stuff like fat models or service layers. This is something Next.js has done very well with their examples hosted on Github.

TL;DR: the idea is basically to write the Django data from the DB into a JS object and then use that to feed Vue components. I imagine they do this only for the stuff that uses Vue and not the whole page markup.

Vue is a great option to combine with server rendered markup (PHP, Python, etc) because it can read the templates directly from the DOM and doesn't need a build step like JSX does.

It's not the only option though. You could also use Preact + Htm (JSX in string templates) which doesn't need a build step either and is much smaller than Vue.

https://github.com/developit/htm

I am currently working on a personal project using Django and Django Rest Framework purely as the back-end. My front-end is a React app.

Because I just use django+drf for the api, I thought about using Flask + Flask REST.. However, after having worked with Django over 3 years, I found the learning curve quite steep.

Do you intend to use Vuex and/or Vue router at some point?

Would be nice to see a semi complete project using VueJS with Django integrated as closely as in the article.

Something along the lines of: https://github.com/gothinkster/realworld which covers front-end and back-end separately

if you use https://www.transcrypt.org/ you do not need node.js and with little work you can write Vue apps like this

class MyApp(VueBase):

    def __init__(self):
        self.el = "#app"
        self.msg = "Hello from vue class"

    def created(self):
        print('Created')

    def v_show(self, evt):
        print('show method', evt)

    def computed_title(self):
        return self.msg + " Computed"

app = MyApp() app.mount_to("#app")

#Vue methods declare with v_ #Computed and watch with computed_ and watch_

alpine.js or intecooler.js will neglate the need for vue.js altogether. I have moved away from the SPA approach even though I have worked as frontend dev. html rendered on the server all the way with sprinkles of js.

Ah yes, Vue in Jinja. What's better than embedding template in another one and both languages use the same interpolation delimiters.

Anyone has a similar "how-to" article on how to do this with Flask and Vue?