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™️ ;-)
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! :)
Super helpful -- thank you!
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:
// allow paren-less arrow functions
// 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.
thanks man! i'll try it again :)
so great !!! Thank you so much
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.