Vue on Django, Part 1

Ryan Palo on June 21, 2017

Note: This tutorial is a couple of years old and uses out of date versions of both Django and Vue. I don't currently have enough time to go throug... [Read Full]
markdown guide

Here's another approach that I wrote about. If you're curious about how to combine Django + Vue without doing a Single Page Aapp, you may want to check it out: hackernoon.com/reconciling-djangos...


Is there a way you can use Vue as "modular" frontend? I always see SPA frontends as monolithic app that consume a DjangoRestFramework API which could be built by several Django apps on the backend.
What I'd like to build is a Django app that "brings in" it's own Vue.js frontend "plugin" which is then part of the whole frontend.
Never saw this - Any ideas? I already tried, but without success so far.


Hmmm... Seems like you could create a Django app as a plugin that provided basic view Classes that rendered given data in a Vue-ish way (e.g. generic detail view, list view, edit view, etc.). Then, in your app's views, you could just use your VueListView -- or ListVue, if you will -- instead of Django's built-in ListView class? Something like that? I'm not sure. I'd have to dig into it.


I thought about another way, without (or with only little help from) Django's templating system. I think that the way "compiling" Vue's parts must be to collect all frontend data that is spread over all Django apps ("plugins") in a "collectstatic" hook or the like, and then It is sent to the client as one.
"Compiling" doesn't have to be on each page call - it's, as I mentioned, like a "collectstatic" command. I imagine something like './manage.py collectvue' which does a distributed browserify (possible?) or webpack collecting, compiling the whole Vue frontend from different Django apps together into the /static folder. Then Django can start as normal and deliver that folder to the client, where Vue (on client side) does the rendering. So it would be kind of a SPA, but put together from it's pieces on the server.

That's a big dream of mine, and I (as always) don't know why the heck nobody at all hasn't done this before.
The only thing I could think of is that it is maybe a BadIdea™️ ;-)

Yeah, that sounds like a plain ole Vue app that could be bundled and served on its own Express server. Then you wouldn’t have to incorporate it into Django at all! You could keep your python and JavaScript separate?

eh, yes, but separated into "django-app-bundled" chunks. Who is serving it then, I wouldn't care.


Ryan, Thank You very much for this tutorial.
I did all you have mentioned in this first part, but now, although webpack says Compiled successfully I'm getting error in firefox debugger:
Cannot GET /app.js%20line%20654%20%3E%20eval

Please can you help me.
Thanks in advance, Ogi

After I made further customizations according to second tutorial, all is working great. So first part of this text can be forgotten.
Thank you very much also for the third part.


Glad I could help! I'm trying to get the fourth part done soon. :)


This is a great! I have a django project where I want to redo the front-end as an SPA. I've been learning Vue lately but have just started to research how to get it hooked up to DRF. Can't wait for the next parts! :)


I have some problems with the lint thingy.. where should I modify it to have it four spaces instead of 2?


In your project root, there's a file called eslintrc.js. In there, you should add the rule for spaces:

'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    // indent to 4 spaces
    'indent': ['error', 4]

Also, if you use editorconfig, you can set that option in your .editorconfig file:

indent_size = 4

I'm not positive, but I think that should do it.

code of conduct - report abuse